সিএসএস টিউটোরিয়াল
সিএসএস একটি প্রোগ্রামিং ভাষা যা এইচটিএমএল ডকুমেন্টকে সুদর্শনীয় করে তোলার জন্য ব্যবহৃত হয়।
একটি এইচটিএমএল এলিমেন্টকে কিভাবে প্রদর্শন করানো হবে তা সিএসএসের মাধ্যমে নির্ধারণ করে দেওয়া হয়।
আমাদের এই চিএসএস টিউটোরিয়ালটি আপনাকে সিএসএস এর প্রাথমিক থেকে এডভান্স পর্যন্ত শিখতে সাহায্য করবে।
আমাদের প্রতিটি পরিচ্ছেদে রয়েছে অসংখ্য উদাহরণ সেকশন। আপনি উদাহরণ সেকশনে মাউস নিয়ে গেলে উপরের কোণায় কোড copyকরার একটি অপশন দেখতে পাবেন। copyঅপশনে মাউস ক্লিক করলে ক্লিপবোর্ডে কোড কপি হবে।
আপনি আপনার এডিটর ওপেন করে copyকরা কোড pasteকরতে পারবেন। এছাড়া উদাহরণ সেকশনের নিচে উদাহরণের ফলাফলও দেখানো হয়েছে।
kt_satt_skill_example_id=1285
সিএসএস কি?
- CSS এর পূর্ণরূপ হলো Cascading Style Sheets
- স্ক্রিন, পেপার বা অন্যান্য মিডিয়ায় এইচটিএমএল এলিমেন্টকে আকর্ষনীয়ভাবে উপস্থাপন করার জন্য সিএসএস ব্যবহার করা হয়
- এইচটিএমএলে এক্সটার্নাল সিএসএস ব্যবহার করলে অনেক সময় সাশ্রয় হয়। কেননা, ইহা একই সঙ্গে একাধিক ওয়েব পেজের লেআউট(layout) নিয়ন্ত্রন করতে পারে
- বাহ্যিকভাবে স্টাইল শীট ব্যবহারের জন্য সিএসএস ফাইলের নামের শেষে
.cssএক্সটেনশন দিতে হয়
সিএসএস রেফারেন্স
স্যাট একাডেমির সিএসএস রেফারেন্সসেকশনে সব ধরনের সিলেক্টর এবং প্রোপার্টি গুলোর ব্যাখ্যা, উদাহরণ, ব্রাউজারে সাপোর্ট এবং আরো অনেক তথ্য খুব সহজভাবে তুলে ধরা হয়েছে।
সিএসএস প্রোগ্রামিং টিউটোরিয়াল লিস্ট
সিএসএস বেসিক টিউটোরিয়াল
সিএসএস হোম-HOME সিএসএস পরিচিতি-Introduction সিএসএস গঠনপ্রণালী-Syntax সিএসএস ব্যবহার পদ্ধতি-Use সিএসএস কালার-Color সিএসএস ব্যাকগ্রাউন্ড-Background সিএসএস বর্ডার-Border সিএসএস মার্জিন-Margin সিএসএস প্যাডিং-Padding সিএসএস উচ্চতা/প্রস্থ-Height/Width সিএসএস বক্সমডেল-BoxModel সিএসএস আউটলাইন-Outline সিএসএস টেক্সট-Text সিএসএস লিংক-Link সিএসএস লিস্ট-List সিএসএস টেবিল-Table সিএসএস প্রদর্শনী-Display সিএসএস সর্বোচ্চ উচ্চতা-Maxwidth সিএসএস পজিশন-Position সিএসএস ওভারফ্লো-Overflow সিএসএস ফ্লট-Float সিএসএস ইনলাইন-ব্লক-Inlineblock সিএসএস এলাইন-Align সিএসএস কম্বিন্যাটর-Combinator সিএসএস সুডো-ক্লাস-PseudoClass সিএসএস সুডো-এলিমেন্ট-PseudoElement সিএসএস প্রোপার্টি-Opacity সিএসএস ন্যাভিগেশনবার-NavigationBar সিএসএস ড্রপডাউন-Dropdown সিএসএস টুলটিপ-Tooltip সিএসএস ইমেজ গ্যালারী-ImageGallery সিএসএস ইমেজ স্প্রাইট-ImageSprite সিএসএস এট্রিবিউট সিলেক্টর-AttrSelector সিএসএস ফর্ম-Form কাউন্টার-Counter টিউটোরিয়াল
সিএসএস-৩ টিউটোরিয়াল
সিএসএস ভূমিকা-Introduction সিএসএস রাউন্ডেড কর্নার-RoundedCorner সিএসএস বর্ডারইমেজ-Border Image সিএসএস ব্যাকগ্রাউন্ড-Background সিএসএস কালার-Color সিএসএস গ্র্যাডিয়েন্ট-Gradient সিএসএস স্যাডো-Shadow সিএসএস টেক্সট-Text সিএসএস 3ফন্ট-Font সিএসএস 2D ট্রান্সফর্ম-Transform সিএসএস 3D ট্রান্সফর্ম-Transform সিএসএস ট্রানজিশন-Transition সিএসএস এনিমেশন-Animation সিএসএস ইমেজ-Image সিএসএস বাটন-Button সিএসএস পেজিনেশন-Pagination সিএসএস মাল্টি-কলাম-MultColumn সিএসএস ইউজার ইন্টারফেস-UserInterface সিএসএস বক্স সাইজিং-BoxSizing সিএসএস ফ্লেক্সবক্স-Flexbox সিএসএস মিডিয়া কুয়েরি-MediaQuery সিএসএস মিডিয়া কুয়েরি উদাহরণসিএসএস রেসপন্সিভ টিউটোরিয়াল
সিএসএসরেসপন্সিভ পরিচিতি-Introduction সিএসএস রেসপন্সিভ ভিউপোর্ট-Viewport সিএসএস রেসপন্সিভ গ্রাইড ভিউ-Grid View সিএসএস রেসপন্সিভ মিডিয়া কুয়েরি-Media Query সিএসএসরেসপন্সিভ ইমেজ-Image সিএসএস রেসপন্সিভভিডিও-Video সিএসএস ফ্রেমওয়ার্ক-Frameworks
সিএসএস রেফারেন্স টিউটোরিয়াল
সিএসএস রেফারেন্স-Reference সিএসএস সিলেক্টর-Selector সিএসএস ফাংশন-Function সিএসএস রেফারেন্স আউরাল-ReferenceAural সিএসএস ওয়েব সেফ ফন্ট-WebSafeFont সিএসএস এনিমেটেবল-Animatable সিএসএস ইউনিট-Unit সিএসএস PX-EM কনভার্টার-Converter সিএসএস কালার-Color সিএসএস কালার ভ্যালু-ColorValue সিএসএস ডিফল্ট ভ্যালু-DefaultValue সিএসএস ব্রাউজার সাপোর্ট-BrowserSupport
সিএসএস কেন ব্যবহার করবেন?
একটি ওয়েব পেজের ডিজাইন করা, গঠন তৈরি করা এবং বিভিন্নভাবে প্রদর্শনীর জন্য সিএসএস ব্যবহার করা হয়।
সবচেয়ে গুরুত্বপূর্ণ বিষয়টি হল সিএসএস এর মাধ্যমে আপনি ভিন্ন ভিন্ন ডিভাইসে একটি ওয়েব পেজকে সুন্দরভাবে উপস্থাপন করতে পারবেন।
সিএসএসের মাধ্যমে বড় সমস্যার সমাধান
একটি ওয়েব পেজকে সাজানোর উদ্দেশ্য নিয়ে এইচটিএমএলের মধ্যে কোনো ট্যাগ নাই।
একটি ওয়েব পেজে শুধুমাত্র কন্টেন্ট বা পেজের গঠন তৈরির জন্যই এইচটিএমএল তৈরি করা করা হয়েছে। যেমনঃ
< h1>ইহা একটি হেডিং ট্যাগ
< p>ইহা একটি প্যারাগ্রাফ ট্যাগ।< /p>সর্বপ্রথম এইচটিএমএল ৩.২ এ যখন < font> ট্যাগ এবং color এট্রিবিউট সংযুক্ত করা হয়েছিল, তখন ইহা ওয়েব ডেভেলপারদের মধ্যে আতঙ্ক ছড়াতে শুরু করেছিল।
কারণ তখন বড় বড় ওয়েবসাইট ডেভেলপমেন্টের জন্য প্রত্যেকটি পেজে ফন্ট বা কালারের তথ্যসমুহ আলাদা আলাদা ভাবে লিখতে হত, যা একটি বড় সমস্যার কারণ হয়ে দাঁড়িয়েছিল।
এই সমস্যা সমাধানের জন্য World Wide Web Consortium (W3C) সিএসএস তৈরি করে।
সিএসএসের মাধ্যমে সময় ও কাজ সাশ্রয়
সাধারনত এক্সটার্নাল সিএসএস ফাইলকে .css এক্সটেনশন দিয়ে সংরক্ষণ করতে হয়। যেমনঃ- external.css
আপনি চাইলে শুধুমাত্র একটি এক্সটার্নাল সিএসএস ফাইল পরিবর্তনের মাধ্যমে খুব সহজেই একটি সম্পূর্ণ ওয়েবসাইটের স্টাইল পরিবর্তন করতে পারেন।
সিএসএস সিনট্যাক্স(CSS Syntax)
সিএসএস সিলেক্টর এবং ডিক্লেয়ারেশন ব্লকের সমন্বয়ে একটি সিএসএস রুল-সেট গঠিত হয়।
আপনি যে এইচটিএমএল এলিমেন্টকে ষ্টাইল করতে চান তাকেই সিএসএস সিলেক্টর বলা হয়।
সিএসএসে এক বা একাধিক ডিক্লেয়ারেশন ব্লক থাকতে পারে। একের অধিক ডিক্লেয়ারেশন ব্লককে সেমিকোলনের মাধ্যমে পৃথক করা হয়।
প্রতিটি ডিক্লেয়ারেশন ব্লকে একটি সিএসএস প্রোপার্টির নাম ও একটি ভ্যালু থাকে এবং কোলনের মাধ্যমে এদেরকে পৃথক করা হয়।
প্রতিটি সিএসএস ডিক্লেয়ারেশন ব্লক সর্বদাই সেমিকোলনের মাধ্যমে শেষ হয় এবং ডিক্লেয়ারেশন ব্লক/ব্লকসমূহ Curly Braces(দ্বিতীয় বন্ধনী) দ্বারা বেষ্টিত থাকে।
নিচের উদাহরণে সবগুলো < p> এলিমেন্টের জন্য টেক্সটের এলাইনমেন্ট center এবং কালার red সেট করা হয়েছেঃ
kt_satt_skill_example_id=151
সিএসএস সিলেক্টর
name, id, class, attribute ইত্যাদির উপর ভিত্তি করে বিভিন্ন এইচটিএমএল এলিমেন্টকে স্টাইল করার জন্য সিএসএস সিলেক্টরসমূহ ব্যবহার করা হয়।
এলিমেন্ট সিলেক্টর
এইচটিএমএল এলিমেন্টের নামানুসারে এলিমেন্টকে সিলেক্ট করার জন্য এলিমেন্ট সিলেক্টর ব্যবহার করা হয়।
নিচের উদাহরণের মত আপনি একটি পেজের সবগুলো < p> এলিমেন্টকে স্টাইল করতে পারেনঃ
kt_satt_skill_example_id=153
id সিলেক্টর
এইচটিএমএল এলিমেন্টের id এট্রিবিউট ব্যবহার করে যেকোন একটি নির্দিষ্ট এলিমেন্টকে সিলেক্ট করা হয়।
একটি এলিমেন্টের id এট্রিবিউটের নাম অবশ্যই পেজে শুধুমাত্র একটি থাকতে পারবে। একই নাম দিয়ে একাধিক এলিমেন্টকে সিলেক্ট করতে চাইলে class এট্রিবিউট ব্যবহার করুন।
নির্দিষ্ট id সম্বলিত এলিমেন্টকে সিলেক্ট করার জন্য প্রথমে #(হ্যাশ) ক্যারেক্টার তারপরে ঐ এলিমেন্টের আইডির নাম লিখতে হবে।
নিচেে উদাহরণে id এর সাহায্যে একটি এলিমেন্টকে সিলেক্ট করে দেখানো হলোঃ
kt_satt_skill_example_id=155
বিঃদ্রঃ id নাম কখনোই নাম্বার দিয়ে শুরু করা যাবে না।
class সিলেক্টর
class সিলেক্টরের মাধ্যমে এক বা একাধিক class এট্রিবিউট সম্বলিত এলিমেন্টসমূহ সিলেক্ট করা যায়।
নির্দিষ্ট class সম্বলিত এলিমেন্টকে সিলেক্ট করার জন্য প্রথমে .(ডট) ক্যারেক্টার তারপরে ঐ এলিমেন্টের class এর নাম লিখতে হবে।
নিচের উদাহরণে class এট্রিবিউট ব্যবহার করে এলিমেন্ট সিলেক্ট করে দেখানো হলোঃ
kt_satt_skill_example_id=165
এছাড়াও আপনি চাইলে এলিমেন্টের নামের সাথে class সিলেক্টর ব্যবহার করে নির্দিষ্ট এইচটিএমএল এলিমেন্টকে সিলেক্ট করতে পারেন।
নিচের উদাহরণে শুধুমাত্র "text" নামের ক্লাসযুক্ত < p> এলিমেন্টকে সিলেক্ট করা হয়েছেঃ
kt_satt_skill_example_id=167
এইচটিএমএল এলিমেন্টের মধ্যে ভিন্ন ভিন্ন কাজের জন্য একের অধিক ক্লাসও ব্যবহার করা যায়।
নিচের উদাহরণে class="text" এবং class="para" অনুসারে < p> এলিমেন্টকে স্টাইল করা হয়েছেঃ
kt_satt_skill_example_id=169
বিঃদ্রঃ class নাম কখনোই নাম্বার দিয়ে শুরু করা যাবে না।
গ্রুপ সিলেক্টর
আপনি অনেকগুলো এলিমেন্টের একই রকম স্টাইল করতে চাইলে গ্রুপ সিলেক্টর ব্যবহার করতে পারেন। যেমনঃ
h1 {
text-align: center;
color: slateblue;
}
h2 {
text-align: center;
color: slateblue;
}
p {
text-align: center;
color: slateblue;
}কোডের দৈর্ঘ্য কমানোর জন্য গ্রুপ সিলেক্টর ব্যবহার করতে হয়। গ্রুপ সিলেক্টরের ক্ষেত্রে সিলেক্টরসমূহকে কমা দ্বারা পৃথক করতে হয়।
নিচের উদাহরণে উপরের কোডসমূহের দৈর্ঘ্য কমানোর জন্য গ্রুপ সিলেক্টর ব্যবহার করে সিলেক্ট করা হয়েছেঃ
kt_satt_skill_example_id=171
সিএসএস কমেন্ট
সংক্ষেপে কোডের কাজ ব্যাখ্যা করার জন্য কমেন্ট ব্যবহার করা হয়। কমেন্ট আপনাকে পরবর্তী সময়ে এই কোড নিয়ে কাজ করতে সাহায্য করবে।
ব্রাউজার কখনোই কমেন্ট/কমেন্টসমূহ প্রদর্শন করে না।
সিএসএসে কমেন্ট শুরু হয় /* দিয়ে এবং শেষ হয় */ দিয়ে। এই কমেন্ট আবার একাধিক লাইনেরও হতে পারে।
kt_satt_skill_example_id=173
যখন একটি ব্রাউজার কোন স্টাইল শীট পড়ে, তখন ইহা স্টাইল শীটে দেওয়া কমান্ড অনুসারে এইচটিএমএল ডকুমেন্টের স্টাইল/গঠন পরিবর্তন করে।
সিএসএস ব্যবহারের পদ্ধতি
এইচটিএমএল ডকুমেন্টকে স্টাইল করার জন্য তিনটি উপায় রয়েছেঃ
- ইনলাইন(inline) স্টাইল
- ইন্টারনাল(internal) স্টাইল
- এক্সটার্নাল(external) স্টাইল
ইনলাইন স্টাইল
আপনি যদি আপনার সাইটের কোনো একটি পেজের শুধুমাত্র একটি এলিমেন্ট/ট্যাগকে অর্থাৎ কোনো নির্দিষ্ট অংশকে ভিন্ন ভাবে উপস্থাপন করতে চান তাহলে ইনলাইন স্টাইল ব্যবহার করতে পারেন।
এলিমেন্টকে ইনলাইন স্টাইল করার জন্য ঐ এলিমেন্টের মধ্যে style এট্রিবিউট যুক্ত করতে হয় যা যেকোনো সিএসএস property:value ধারন করতে পারে।
নিচের উদাহরণে ইনলাইন স্টাইলের ব্যবহার দেখানো হলোঃ
kt_satt_skill_example_id=187
পরামর্শঃ ইনলাইন স্টাইল ব্যবহার থেকে বিরত থাকাই ভালো, ইহা আপনার কোডের মধ্যে বিশৃংখলা সৃষ্টি করবে, দেখতে অসুন্দর হবে। তাই এক্সটার্নাল স্টাইল শীট ব্যবহার করাই উত্তম।
ইন্টারনাল স্টাইল
আপনি যদি আপনার সাইটের শুধুমাত্র একটি পেজকে ভিন্ন ভাবে উপস্থাপন করতে চান তাহলে ইন্টারনাল স্টাইল শীট ব্যবহার করতে পারেন।
এইচটিএমএল পেজের < head> সেকশনে < style> ট্যাগের মধ্যে ইন্টারনাল স্টাইলের কোড লিখতে হয়। নিচে উদাহরণের মাধ্যমে বিষয়টি দেখানো হলোঃ
kt_satt_skill_example_id=198
এক্সটার্নাল স্টাইল
আপনি যদি আপনার সাইটের সবগুলো পেজের স্টাইল একই রকম এবং একই সাথে পরিবর্তন করতে চান তাহলে এক্সটার্নাল স্টাইল শীট ব্যবহার করুন।
কেননা এক্সটার্নাল স্টাইল শীট ব্যবহার করে শুধুমাত্র একটি ফাইল পরিবর্তনের মাধ্যমে আপনি সম্পূর্ণ ওয়েব সাইটের চেহারা পরিবর্তন করে দিতে পারবেন।
এইচটিএমএল পেজের সাথে এক্সটার্নাল স্টাইল শীট সংযুক্ত করার জন্য < link> এলিমেন্টটি ব্যবহার করতে হয় এবং < link> ট্যাগটি < head> সেকশন এর মধ্যে রাখতে হয়।
kt_satt_skill_example_id=200
যেকোন টেক্সট এডিটরে এক্সটার্নাল স্টাইল শীট লেখা যায় এবং এই এক্সটার্নাল স্টাইল ফাইলে এইচটিএমএল ট্যাগ ব্যবহার করা যায় না। স্টাইল শীট ফাইলটি অবশ্যই .css এক্সটেনশন দিয়ে সংরক্ষন করতে হয়।
এখানে "style.css" কেমন হবে তা দেখানো হলোঃ
h2{
color:blue;
}
p{
color:white;
}
body{
background-color: #DA90DA;
}বিঃদ্রঃ প্রোপার্টির ভ্যালু এবং এর এককের মধ্যে কোনো স্পেস/ফাঁকা রাখবেন না। যেমনঃ margin-left: 30 px; করা যাবে না। সঠিক পদ্ধতি হলোঃ margin-left: 30px;
বহুমূখী স্টাইল শীট
একই এলিমেন্টকে স্টাইল করার জন্য যদি বিভিন্ন স্টাইল শীটের মধ্যে একই প্রোপার্টির বিভিন্ন ভ্যালু ব্যবহার করি তাহলে ব্রাউজার সবশেষে পঠিত ভ্যালুটি স্টাইল করার কাজে ব্যবহার করে।
উদাহরণ
ধরুন, < h2> এলিমেন্টকে স্টাইল করার জন্য এক্সটার্নাল স্টাইল শীটে নিচের কোড লেখা হয়েছেঃ
h2 {
color: blue;
}আবার ধরুন, < h2> এলিমেন্টকে স্টাইল করার জন্য ইন্টারনাল স্টাইল শীটে নিচের কোড লেখা হয়েছেঃ
h2 {
color: green;
}যদি এক্সটার্নাল স্টাইলের link ট্যাগের পরে ইন্টারনাল স্টাইলের কোড লেখা হয় তাহলে < h2> এলিমেন্টের কালার "green" হবে।
kt_satt_skill_example_id=201
তবে, যদি এক্সটার্নাল স্টাইলের পূর্বে ইন্টারনাল স্টাইলের কোড লেখা হয় তাহলে < h2> এলিমেন্টের কালার "blue" হবে।
kt_satt_skill_example_id=205
স্টাইলের ক্রম
একটি ওয়েবসাইটে কোন একটি এইচটিএমএল এলিমেন্টের জন্য একের অধিক স্টাইল শীট থাকলে কোন স্টাইলটি ব্যবহৃত হবে?
এইচটিএমএলে ব্যবহৃত স্টাইল শীটসমূহের অগ্রাধিকার ক্রমানুসারে নিম্নে তুলে ধরা হলোঃ
- ইনলাইন স্টাইল(এইচটিএমএল এলিমেন্টের মধ্যে)
- এক্সটার্নাল এবং ইন্টারনাল স্টাইল শীট(হেড সেকশন এর মধ্যে)
- ব্রাউজার ডিফল্ট
সুতরাং, ইনলাইন স্টাইল শীটের অগ্রাধিকার সবচেয়ে বেশি। অর্থাৎ ইহা < head> ট্যাগের মধ্যে ব্যবহৃত ইন্টারনাল এবং এক্সটার্নাল স্টাইল শীট অথবা ব্রাউজারের ডিফল্ট ভ্যালুকে পরিবর্তন করতে পারে।
kt_satt_skill_example_id=207
আপনারা প্রতিনিয়তই বিভিন্ন সাইট ভিজিট করেন। লক্ষ্য করলে দেখবেন সাইটগুলোর কালারের ভিন্নতা আছে। সাইটসমূহের এই কালারের ভিন্নতা অর্থাৎ কালার সেট করা হয় সিএসএস দিয়ে।
সিএসএস দিয়ে কালার সেট করার জন্য অধিকাংশ সময় নিচের যেকোনো একটি পদ্ধতি ব্যবহৃত হয়।
- কালারের নাম ব্যবহার করে- যেমন "red"
- RGB ভ্যালু ব্যবহার করে - যেমন "rgb(255, 0, 0)"
- HEX ভ্যালু ব্যবহার করে - যেমন "#ff0000"
কালারের নাম
কালারের নাম ব্যবহার করে কালার সেট করা যায়ঃ
kt_satt_skill_example_id=216
বিঃদ্রঃ কালারের নাম কেস-সেনসিটিভ নয়। যেমন- "Red", "red" অথবা "RED" একই।
RGB (Red, Green, Blue)
rgb(red, green, blue) সূত্র অনুসারে RGB কালার ভ্যালু সেট করা হয়।
প্রতিটি প্যারামিটার (red, green, blue)-এর ভ্যালু 0 থেকে 255 এর মধ্যে হতে হবে। কারণ কালারের সর্বোচ্চ ভ্যালু 255 এবং সর্বনিম্ন ভ্যালু 0।
উদাহরণস্বরূপ, rgb(255,0,0) এর রং লাল হবে। কারণ এখানে লাল কালারের ভ্যালু সেট করা হয়েছে 255 এবং অন্যান্য কালারের ভ্যালু সেট করা হয়েছে 0। নিচে RGB এর বিভিন্ন ভ্যালু মিশ্রন করে পরীক্ষা করুনঃ
| Red | Green | Blue |
|---|---|---|
| 255 | 0 | 0 |
rgb(255, 0, 0)
kt_satt_skill_example_id=221
হালকা ধূসর অথবা গাঢ় ধূসর অথবা শুধু ধূসর কালার করার জন্য ৩টি ভ্যালুই সমান রাখতে হবে।
kt_satt_skill_example_id=224
হেক্সাডেসিমাল কালার
হেক্সাডেসিমাল কালার ভ্যালু দিয়েও RGB কালার ভ্যালু সেট করা যায়। যেমন- #RRGGBB, এখানে RR (red), GG (green) এবং BB (blue) হলো 00 থেকে FF এর মধ্যে হেক্সাডেসিমাল ভ্যালু যা RGB এর 0-255 এর মতোই।
উদাহরণস্বরূপ, #FF0000 এর ভ্যলু লাল হবে। কারণ এখানে লাল কালারের ভ্যালু সেট করা হয়েছে FF এবং অন্যান্য কালারের ভ্যালু সেট করা হয়েছে 00।
kt_satt_skill_example_id=226
হালকা ধূসর অথবা গাঢ় ধূসর অথবা শুধু ধূসর কালার করার জন্য ৩টি ভ্যালুই সমান রাখতে হবে।
kt_satt_skill_example_id=228
এইচটিএমএল পেজ বা এলিমেন্টের ব্যাকগ্রাউন্ড সেট করার জন্য সিএসএস ব্যাকগ্রাউন্ড প্রোপার্টি ব্যবহার করা হয়।
সিএসএস ব্যাকগ্রাউন্ডসংক্রান্ত প্রোপার্টিসমূহঃ
- background-color
- background-image
- background-position
- background-repeat
- background-attachment
এক নজরে সিএসএস ব্যাকগ্রাউন্ড প্রোপার্টিসমূহ
background
একটি ডিক্লেয়ারেশনের মধ্যে সকল ব্যাকগ্রাউন্ড প্রোপার্টি সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।
background-attachment
পেজের ব্যাকগ্রাউন্ড ইমেজ ফিক্সড থাকবে নাকি স্ক্রল হবে তা সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।
background-color
একটি এলিমেন্টের জন্য ব্যাকগ্রাউন্ড কালার সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।
background-image
একটি এলিমেন্টের জন্য ব্যাকগ্রাউন্ড ইমেজ সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।
background-position
ব্যাকগ্রাউন্ড ইমেজের পজিশন সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।
background-repeat
ব্যাকগ্রাউন্ড ইমেজ কিভাবে রিপিট হবে, তা সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।
background-color
একটি এলিমেন্টের ব্যাকগ্রাউন্ড কালার সেট করার জন্য background-color প্রোপার্টিটি ব্যবহার করা হয়।
search সিএসএস দিয়ে একটি সম্পূর্ণ পেজের ব্যাকগ্রাউন্ড কালার সেট করার জন্য নিচের পদ্ধতি অবলম্বন করা হয়।
kt_satt_skill_example_id=293
search সিএসএস দিয়ে কালার করতে অধিকাংশ ক্ষেত্রেই নিম্নোক্ত পদ্ধতিসমূহ ব্যবহৃত হয়ঃ
- কালারের নাম ব্যবহার করে। যেমন- "red"
- HEX ভ্যালু ব্যবহার করে। যেমন- "#ff0000"
- RGB ভ্যালু ব্যবহার করে। যেমন- "rgb(255,0,0)"
সম্ভাব্য সমস্ত কালার ভ্যালুর তালিকা এক নজরে দেখার জন্য সিএসএস কালার ভ্যালু পেজে ভিজিট করুন।
নিচের উদাহরণে < h1>, < p> এবং < div> এলিমেন্টের ব্যাকগ্রাউন্ড কালারসমূহ ভিন্ন ভিন্ন ভাবে সেট করা হয়েছেঃ
kt_satt_skill_example_id=299
background-image
এলিমেন্টের ব্যাকগ্রাউন্ডে ছবি বা ইমেজ সেট করার জন্য background-image প্রোপার্টিটি ব্যবহার করা হয়।
সম্পূর্ণ এলিমেন্টকে কাভার করার জন্য ডিফল্টভাবে ইমেজটির পূনরাবৃত্তি ঘটে।
একটি পেজে কিভাবে ব্যাকগ্রাউন্ড ইমেজ সেট করা হয় তা নিচের উদাহরণের মাধ্যমে দেখানো হলোঃ
kt_satt_skill_example_id=302
ব্যাকগ্রাউন্ড ইমেজ এবং টেক্সট কালারের সঠিক সমন্বয় না হলে লেখা পড়তে সমস্যা হয় তা নিচের উদাহরণের মাধ্যমে দেখানো হলোঃ
kt_satt_skill_example_id=304
বিঃদ্রঃ যখন ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করবেন, তখন টেক্সটের কালার এবং এমন ইমেজ ব্যবহার করবেন যেন টেক্সট পড়তে সমস্যা না হয়।
background-repeat: repeat-x; & repeat-y;
background-image প্রোপার্টি ডিফল্টভাবে একটি ইমেজকে অনুভূমিক এবং উল্লম্ব উভয় দিকেই পুনরাবৃত্তি করে।
কিছু ইমেজকে হয় অনুভূমিকভাবে আর নয় উল্লম্বভাবে পুনরাবৃত্তি করা উচিত, তা না হলে এগুলো দেখতে অদ্ভুত লাগবে। যেমনঃ
kt_satt_skill_example_id=305
বিঃদ্রঃ স্পেসিফিকভাবে নির্দিষ্ট করে না দেয়া হলে ব্যাকগ্রাউন্ড ইমেজ x এবং y উভয় অক্ষেই পুনরাবৃত্তি করবে।
শুধুমাত্র অনুভূমিকভাবে ইমেজ রিপিট করার জন্য background-repeat: repeat-x; ব্যবহার করা হয়।
kt_satt_skill_example_id=306
পরামর্শঃ একইভাবে ইমেজকে উলম্বভাবে রিপিট করার জন্য background-repeat: repeat-y; সেট করুন।
background-position প্রোপার্টি এবং no-repeat ভ্যালুর ব্যবহার
আপনি যদি ব্যাকগ্রাউন্ড ইমেজকে শুধুমাত্র একবার দেখাতে চান তাহলে background-repeat প্রোপার্টির ভ্যালু no-repeat সেট করুনঃ
kt_satt_skill_example_id=309
উপরোক্ত উদাহরণে, টেক্সট এবং ব্যাকগ্রাউন্ড ইমেজকে একই জায়গায় দেখানো হয়েছে। আপনি চাইলে ইমেজের পজিশন পরিবর্তন করতে পারেন যাতে ইহা টেক্সটসমূহ পড়তে কোনো সমস্যা না করে।
background-position প্রোপার্টি দ্বারা ইমেজের পজিশন পরিবর্তন করা হয়।
kt_satt_skill_example_id=312
background-attachment
ব্যাকগ্রাউন্ড ইমেজটি ব্যাকগ্রাউন্ডে ফিক্সড থাকবে নাকি স্ক্রলের সাথে নড়বে সেটি নির্ধারণ করার জন্য background-attachment প্রোপার্টিটি ব্যবহার করা হয়ঃ
kt_satt_skill_example_id=317
background - শর্টহ্যান্ড প্রোপার্টি
কোড সংক্ষিপ্ত করার জন্য সকল ব্যাকগ্রাউন্ড প্রোপার্টিকে একটি সিঙ্গেল প্রোপার্টির মধ্যে লেখা সম্ভব। একে শর্টহ্যান্ড প্রোপার্টি বলে
background হলো ব্যাকগ্রাউন্ডের জন্য শর্টহ্যান্ড প্রোপার্টিঃ
kt_satt_skill_example_id=322
যখন শর্টহ্যান্ড প্রোপার্টি ব্যবহার করবেন তখন নিচের ক্রম ঠিক রাখুনঃ
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
অন্য সবগুলো প্রোপার্টির ক্রম ঠিক থাকলে একটি প্রোপার্টির মান অনুপস্থিত থাকলেও কোন সমস্যা হবে না।
সিএসএস border প্রোপার্টি
সিএসএস border প্রোপার্টি ব্যবহার করে আপনি একটি এলিমেন্টের বর্ডারের স্টাইল, কালার এবং প্রস্থ পরিবর্তন করতে পারেন।
আপনার বুঝার স্বার্থে নিচে কিছু বর্ডারের ব্যবহার দেখানো হলোঃ
| এই এলিমেন্টের চারপাশেই বর্ডার ব্যবহার করা হয়েছে। |
এই এলিমেন্টের উপরে সবুজ কালারের বর্ডার ব্যবহার করা হয়েছে।
| এই এলিমেন্টের চার পাশেই গোলাকার(round) বর্ডার ব্যবহার করা হয়েছে। |
এক নজরে সিএসএস বর্ডার প্রোপার্টিসমূহ
একটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো বর্ডার প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।
একটি ডিক্লেয়ারেশনের মাধ্যমে নিচের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।
নিচের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।
নিচের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।
নিচের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।
বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।
একটি ডিক্লেয়ারেশনের মাধ্যমে বাম পাশের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।
বাম পাশের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।
বাম পাশের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।
বাম পাশের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।
একটি ডিক্লেয়ারেশনের মাধ্যমে বাম পাশের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।
একটি ডিক্লেয়ারেশনের মাধ্যমে উপরের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।
উপরের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।
উপরের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।
উপরের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।
বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।
একটি ডিক্লেয়ারেশনের মাধ্যমে উপরের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।
উপরের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।
উপরের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।
উপরের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।
বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।
বর্ডার(Border) স্টাইল
বিভিন্ন ধরনের বর্ডার তৈরির জন্য search সিএসএস border-style প্রোপার্টিটি ব্যবহার করা হয়।
নিম্নে border-style প্রোপার্টির জন্য ব্যবহৃত ভ্যালুগুলো দেওয়া হলোঃ
solid- এটি solid বর্ডার ডিফাইন করেdouble- এটি double বর্ডার ডিফাইন করেdotted- এটি dotted বর্ডার ডিফাইন করেdashed- এটি dashed বর্ডার ডিফাইন করেinset- এটি 3D inset বর্ডার ডিফাইন করে। যেটা border-color এর ভ্যালুর উপর নির্ভর করেoutset- এটি 3D outset বর্ডার ডিফাইন করে। যেটা border-color এর ভ্যালুর উপর নির্ভর করেgroove- এটি 3D grooved বর্ডার ডিফাইন করে। যেটা border-color এর ভ্যালুর উপর নির্ভর করেridge- এটি 3D ridge বর্ডার ডিফাইন করে। যেটা border-color এর ভ্যালুর উপর নির্ভর করেhidden- এটি বর্ডারকে হিডেন করেnone- কোন বর্ডার ডিফাইন করে না
border-style প্রোপার্টিতে এক থেকে চারটি পর্যন্ত ভ্যালু থাকতে পারে। এটি ক্রমানুসারে উপরের বর্ডার থেকে শুরু করে ডানপাশে, নিচে এবং বামপাশে গিয়ে শেষ হয়।
kt_satt_skill_example_id=373
বিঃদ্রঃ border-style প্রোপার্টির ভ্যালু সেট করা না হলে বর্ডার সংক্রান্ত অন্যান্য প্রোপার্টিগুলো কাজ করবে না।
border-width
একটি এলিমেন্টের চারিদিকের বর্ডারের প্রস্থ সেট করার জন্য border-width প্রোপার্টিটি ব্যবহার করা হয়।
সিএসএসে প্রস্থ নির্ধারণের বিভিন্ন একক যেমনঃ px, pt, cm, em ইত্যাদি ব্যবহার করে বর্ডারের প্রস্থ সেট করা হয় অথবা পূর্ব নির্ধারিত ভ্যালু যেমন thin, medium এবং thick ইত্যাদি ব্যবহার করেও বর্ডারের প্রস্থ সেট করা যায়।
border-width প্রোপার্টির এক হতে সর্বোচ্চ চারটি ভ্যালু থাকতে পারে। এগুলো হলোঃ top border, right border, bottom border এবং left border
kt_satt_skill_example_id=377
বিঃদ্রঃ border-width প্রোপার্টিটি ব্যবহারের জন্য border-style প্রোপার্টিটি ব্যবহার করতে হবে, নতুবা এটি কাজ করবে না।
border-color
বর্ডারের কালার সেট করার জন্য border-color প্রোপার্টিটি ব্যবহার করা হয়।
নিচের যেকোনো একটি পদ্ধতি ব্যবহার করে কালার সেট করা যায়ঃ
- Name - কালারের নাম ব্যবহার করে, যেমন
"red" - Hex - হেক্সাডেসিমাল ভ্যালু ব্যবহার করে, যেমন
"#ff0000" - RGB - RGB ভ্যালু ব্যবহার করে, যেমন
"rgb(255,0,0)" - transparent ব্যবহার করে।
border-color প্রোপার্টির এক হতে সর্বোচ্চ চারটি ভ্যালু থাকতে পারে। এগুলো হলো: (top border, right border, bottom border, এবং left border)
border-color নির্ধারণ করা না হলে ইহা উত্তরাধিকার সূত্রে এলিমেন্টকে কালার করে ফেলে।
kt_satt_skill_example_id=384
বিঃদ্রঃ border-color প্রোপার্টিটি ব্যবহারের জন্য border-style প্রোপার্টিটি ব্যবহার করতে হবে, নতুবা এটি কাজ করবে না।
প্রত্যেক পাশে পৃথকভাবে বর্ডারের ব্যবহার
আপনি নিশ্চয় আগের উদাহরণেই জানতে পেরেছেন যে একটি এলিমেন্টের চারপাশে পৃথকভাবে বর্ডার সেট করা যায়।
পৃথকভাবে বর্ডার সেট করার প্রত্যেক পাশের বর্ডারের জন্য আলাদাভাবে search সিএসএস প্রোপার্টি ডিক্লেয়ার করতে হয়। (যেমন- top, right, bottom, left)
kt_satt_skill_example_id=385
এই উদাহরণটিতেও উপরের উদাহরণের মতো ফলাফল দেখাবেঃ
kt_satt_skill_example_id=386
উপরের উদাহরনটি কিভাবে কাজ করে নিচে তা উদাহরণসহ ব্যাখ্যা করা হলোঃ
যদি border-style প্রোপার্টিতে চারটি ভ্যালু থাকেঃ
- উপরের বর্ডারটি
dotস্টাইলের হবে। - ডানের বর্ডারটি
solidস্টাইলের হবে। - নিচের বর্ডারটি
doubleস্টাইলের হবে। - বামের বর্ডারটি
dashedস্টাইলের হবে।
যদি border-style প্রোপার্টিতে তিনটি ভ্যালু থাকেঃ
- উপরের বর্ডারটি
dotস্টাইলের হবে। - ডানের এবং বামের বর্ডার দুটি
solidস্টাইলের হবে। - নিচের বর্ডারটি
doubleস্টাইলের হবে।
যদি border-style প্রোপার্টিতে দুইটি ভ্যালু থাকেঃ
- উপরের এবং নিচের বর্ডার দুটি
dottedস্টাইলের হবে। - ডানের এবং বামের বর্ডার দুটি
solidস্টাইলের হবে।
যদি border-style প্রোপার্টিতে একটি ভ্যালু থাকেঃ
- চারপাশের বর্ডারই
dotস্টাইলের হবে।
উপরের উদাহরণে border-style প্রোপার্টি ব্যাবহার দেখানো হয়েছে। যাইহোক, border-style প্রোপার্টির মতোই border-width এবং border-color প্রোপার্টির ক্ষেত্রেও একই নিয়ম প্রযোজ্য।
border - শর্টহ্যান্ড প্রোপার্টি
আপনি উপরের উদাহরণ গুলো লক্ষ্য করলে দেখবেন যে, বর্ডার এর কিছু উপ-বর্ডার প্রোপার্টি রয়েছে এবং এসকল ক্ষেত্রে কোডের দৈর্ঘ্যও বেড়ে গিয়েছে।
তাই কোড সংক্ষিপ্ত করার জন্য, একটি বর্ডার প্রোপার্টির মধ্যে সবগুলো বর্ডার প্রোপার্টি ব্যবহার করা যায়।
নিচের উপ-বর্ডার প্রোপার্টিসমূহের শর্টহ্যান্ড প্রোপার্টি হলো border:
border-widthborder-style(আবশ্যক)border-color
kt_satt_skill_example_id=388
এছাড়াও আপনি আলাদা আলাদা বর্ডার প্রোপার্টিসমূহকে একটি এলিমেন্টের এক পাশের বর্ডারকে স্টাইল করার জন্য ব্যবহার করতে পারেনঃ
kt_satt_skill_example_id=391
kt_satt_skill_example_id=395
রাউন্ডেড বর্ডার
একটি এলিমেন্ট এর চতুর্দিকের বর্ডারকে রাউন্ড করার জন্য border-radius প্রোপার্টিটি ব্যাবহার করা হয়।
kt_satt_skill_example_id=398
বিঃদ্রঃ border-radius প্রোপার্টিটি ইন্টারনেট এক্সপ্লোরার ৮ অথবা তার পূর্ববর্তী ভার্সনে সাপোর্ট করেনা।
সিএসএস মার্জিন
একটি এলিমেন্টের চারপাশে স্পেস রাখার জন্য সিএসএস margin প্রোপার্টিটি ব্যবহার করা হয়।
সিএসএস margin প্রোপার্টি দ্বারা একটি এলিমেন্টের বর্ডার এর বাহিরে কি পরিমান ফাকা জায়গা থাকবে তা সেট করা হয়।
সিএসএস এর মাধ্যমে, আপনি মার্জিনকে নিয়ন্ত্রণ করতে পারেন। একটি এলিমেন্টের চারপাশে পৃথক পৃথক মার্জিন সেট করার জন্য পৃথক পৃথক সিএসএস margin প্রোপার্টি রয়েছে। যেগুলো হলো: top, right, bottom এবং left।
| এই এলিমেন্টটিতে 50px মার্জিন ব্যবহার করা হয়েছে। |
এক নজরে সিএসএস মার্জিন প্রোপার্টিসমূহ
margin
একটি ডিক্লেয়ারেশনের মাধ্যমে মার্জিনের সবগুলো প্রোপার্টি সেট করার একটি শর্টহ্যান্ড প্রোপার্টি।
লিমেন্টের উপরের মার্জিন সেট করার জন্য ব্যবহৃত হয়।
এলিমেন্টের ডানের মার্জিন সেট করার জন্য ব্যবহৃত হয়।
এলিমেন্টের নিচের মার্জিন সেট করার জন্য ব্যবহৃত হয়।
এলিমেন্টের বামের মার্জিন সেট করার জন্য ব্যবহৃত হয়।
পৃথক পৃথক মার্জিন প্রোপার্টিসমূহ
একটি এলিমেন্ট চারপাশে পৃথকভাবে মার্জিন সেট করার জন্য সিএসএসে ব্যবহৃত margin প্রোপার্টিসমূহ নিম্নে তুলে ধরা হলোঃ-
margin-topmargin-rightmargin-bottommargin-left
এই মার্জিন প্রোপার্টিগুলো নিচের ভ্যালুসমূহ গ্রহণ করতে পারেঃ
auto- ব্রাউজার নিজ থেকে মার্জিন নিয়ে নেয়।- length - px, pt, cm, ইত্যাদি একক ব্যবহার করে মার্জিন সেট করা হয়
- % - সংশ্লিষ্ট এলিমেন্টের প্রস্থ(width) অনুযায়ী মার্জিন সেট করা হয়।
inherit- প্যারেন্ট(parent) ট্যাগ এর সাপেক্ষে উত্তরাধিকার সূ্ত্রে মার্জিন নিয়ে নেয়।
নিচের উদাহরণে < p> এলিমেন্টের প্রত্যেক পাশে বিভিন্ন প্রকার মার্জিনের ব্যবহার দেখানো হলোঃ
kt_satt_skill_example_id=411
মার্জিন - শর্টকাট প্রোপার্টি
কোড সংক্ষিপ্ত করার জন্য সকল মার্জিন প্রোপার্টিকে একটি শর্টকাট প্রোপার্টির মাধ্যমে প্রকাশ করা সম্ভব।
নিচের পৃথক পৃথক মার্জিন প্রোপার্টিসমূহের শটকার্ট প্রোপার্টি হলো margin প্রোপার্টিঃ
margin-topmargin-rightmargin-bottommargin-left
kt_satt_skill_example_id=416
উপরের উদাহরনটি কিভাবে কাজ করে নিচে তা উদাহরণসহ ব্যাখ্যা করা হলোঃ
যদি margin প্রোপার্টিতে চারটি ভ্যালু থাকেঃ
- উপরের মার্জিন 50px হবে।
- ডানের মার্জিন 40px হবে।
- নিচের মার্জিন 80px হবে।
- বামের মার্জিন 70px হবে।
যদি margin প্রোপার্টিতে তিনটি ভ্যালু থাকেঃ
- উপরের মার্জিন 50px হবে।
- ডান ও বামের মার্জিন 40px হবে।
- নিচের মার্জিন 80px হবে।
যদি margin প্রোপার্টিতে দুইটি ভ্যালু থাকেঃ
- উপরের এবং নিচের মার্জিন 50px হবে।
- ডানের ও বামের মার্জিন 80px হবে।
যদি margin প্রোপার্টিতে একটি ভ্যালু থাকেঃ
- চার পাশের মার্জিন 50px হবে।
"auto" ভ্যালুর ব্যবহার
একটি এলিমেন্ট যে কন্টেইনারের মধ্যে আছে সেই কন্টেইনারের অনুভূমিক বরাবর যদি সেটিকে সেন্টারে রাখতে চান তাহলে margin প্রোপার্টির ভ্যালু auto সেট করুন।
এক্ষেত্রে এলিমেন্টটি স্বয়ংক্রিয়ভাবে নির্দিষ্ট প্রস্থ নিয়ে নিবে এবং অবশিষ্ট ফাঁকা জায়গাটি ডান এবং বামপাশে সমান ভাবে ভাগ করে দিবে। অর্থাৎ এলিমেন্টটি সেন্টারে অবস্থান করবে।
kt_satt_skill_example_id=419
"inherit" ভ্যালুর ব্যবহার
নিচের উদাহরণে পেরেন্ট এলিমেন্ট থেকে inherit এর মাধ্যমে এলিমেন্ট বাম পাশের মার্জিন নিয়ে নেয়ঃ
kt_satt_skill_example_id=422
মার্জিন কলাপ্স
এলিমেন্টের উপরের এবং নিচের মার্জিন মাঝে-মাঝে কলাপ্স হয়ে সিঙ্গেল মার্জিনে পরিনত হয় এবং যার ভ্যালূ হবে মার্জিন দুটির ভ্যালুর মধ্যে সর্বোচ্চটি।
এটি হরিজন্টাল মার্জিন বা ডান এবং বামের মার্জিনের ক্ষেত্রে ঘটে না। শুধুমাত্র ভার্টিক্যাল মার্জিন বা উপরের এবং নিচের মার্জিনের ক্ষেত্রে ঘটে।
নিচের উদাহরণটি লক্ষ্য করলে এটি আপনার কাছে পরিষ্কার হয়ে যাবেঃ
kt_satt_skill_example_id=424
এই উদাহরণটিতে < h1> এলিমেন্টের নিচে 60px এবং < h2> এলিমেন্টের উপরে 40px মার্জিন দেয়া হয়েছে।
উপরের উদাহরণ দেখে আপনি খুব সহজেই বলে দিবেন যে, < h1> এবং < h2> এর মধ্যে ভার্টিকাল মার্জিন হবে 100px(60px+40px)। কিন্তু এখানে মার্জিন কলাপ্স ব্যবহৃত হওয়ার কারণে প্রকৃতপক্ষে মার্জিন হবে 60px।
সিএসএস প্যাডিং
বর্ডারের ভিতরে এবং কন্টেন্টের(content) চারপাশে ফাঁকা স্থান তৈরি করার জন্য সিএসএস Padding প্রোপার্টিটি ব্যবহার করা হয়।
Padding প্রোপার্টিটি একটি এলিমেন্টের মধ্যে কন্টেন্টের চারপাশে(বর্ডার এর মধ্যে) ফাঁকা জায়গা তৈরি করে।
সিএসএসের মাধ্যমে আপনি প্যাডিংকে সম্পূর্ণভাবে নিয়ন্ত্রন করতে পারেন। সিএসএস Padding প্রোপার্টি দ্বারা আপনি একটি এলিমেন্টের প্রত্যেক পাশে যেমন- top, right, bottom এবং left এ পৃথকভাবে প্যাডিং সেট করতে পারেন।
এই এলিমেন্টেটির চারপাশে 50px প্যাডিং ব্যবহার করা হয়েছে।
|
এক নজরে সিএসএস প্যাডিং প্রোপার্টিসমূহ
একটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো প্যাডিং প্রোপার্টি সেট করার জন্য একটি শর্টহ্যান্ড প্রোপার্টি।
এলিমেন্টের উপরের প্যাডিং সেট করার জন্য ব্যবহৃত হয়।
এলিমেন্টের ডানের প্যাডিং সেট করার জন্য ব্যবহৃত হয়।
এলিমেন্টের নিচের প্যাডিং সেট করার জন্য ব্যবহৃত হয়।
এলিমেন্টের বামের প্যাডিং সেট করার জন্য ব্যবহৃত হয়।
পৃথক পৃথক প্যাডিং প্রোপার্টিসমূহ
একটি এলিমেন্টের কন্টেন্টের চারপাশে প্যাডিং সেট করার জন্য সিএসএসে ভিন্ন ভিন্ন প্যাডিং প্রোপার্টি রয়েছে। এগুলো হলোঃ
padding-toppadding-rightpadding-bottompadding-left
সবগুলো মার্জিন প্রোপার্টি নিচের ভ্যালুসমূহ গ্রহণ করতে পারেঃ
auto- ব্রাউজার নিজ থেকে মার্জিন নিয়ে নেয়।- length- px, pt, cm, ইত্যাদি একক ব্যবহার করে মার্জিন সেট করা হয়
- % - সংশ্লিষ্ট এলিমেন্টের প্রস্থ(width) অনুযায়ী মার্জিন সেট করা হয়।
inherit- প্যারেন্ট(parent) ট্যাগ এর সাপেক্ষে উত্তরাধিকার সূ্ত্রে মার্জিন নিয়ে নেয়।
নিচের উদাহরণে
kt_satt_skill_example_id=455
প্যাডিং - শর্টহ্যান্ড প্রোপার্টি
কোড সংক্ষিপ্ত করার জন্য সকল প্যাডিং প্রোপার্টিকে একটি শর্টহ্যান্ডশর্টহ্যান্ড প্রোপার্টির মাধ্যমে প্রকাশ করা সম্ভব।
নিচের পৃথক পৃথক প্যাডিং প্রোপার্টিসমূহের শর্টহ্যান্ড প্রোপার্টি হলো padding প্রোপার্টিঃ
padding-toppadding-rightpadding-bottompadding-left
kt_satt_skill_example_id=462
উপরের উদাহরণটি কিভাবে কাজ করে নিচে তা উদাহরণসহ ব্যাখ্যা করা হলোঃ
যদি padding প্রোপার্টিতে চারটি ভ্যালু থাকেঃ
- উপরের প্যাডিং হবে 50px।
- ডানের প্যাডিং হবে 40px।
- নিচের প্যাডিং হবে 80px।
- বামের প্যাডিং হবে 70px।
যদি padding প্রোপার্টিতে তিনটি ভ্যালু থাকেঃ
- উপরের প্যাডিং হবে 50px।
- ডানের ও বামের প্যাডিং হবে 40px।
- নিচের প্যাডিং হবে 80px।
যদি padding প্রোপার্টিতে দুইটি ভ্যালু থাকেঃ
- উপরের এবং নিচের প্যাডিং হবে 50px।
- ডানের এবং বামের প্যাডিং হবে 80px।
যদি padding প্রোপার্টিতে একটি ভ্যালু থাকেঃ
- চারপাশের প্যাডিংই হবে 50px।
kt_satt_skill_example_id=465
সিএসএস Width এবং Height সেট করা
একটি এলিমেন্টের width এবং height সেট করার জন্য সিএসএস width এবং height প্রোপার্টি ব্যবহার করা হয়।
এই এলিমেন্টে 70% width ব্যবহার করা হয়েছে।
এক নজরে সিএসএস ডাইমেনশন প্রোপার্টিসমূহ
একটি এলিমেন্টের width সেট করার জন্য ব্যবহার করা হয়।
একটি এলিমেন্টের সর্বোচ্চ(maximum) width সেট করার জন্য ব্যবহার করা হয়।
একটি এলিমেন্টের সর্বনিম্ন(minumum) width সেট করার জন্য ব্যবহার করা হয়।
একটি এলিমেন্টের height সেট করার জন্য ব্যবহার করা হয়।
একটি এলিমেন্টের সর্বোচ্চ(maximum) height সেট করার জন্য ব্যবহার করা হয়।
একটি এলিমেন্টের সর্বনিম্ন(minumum) height সেট করার জন্য ব্যবহার করা হয়।
স্বয়ংক্রিয়ভাবেও width এবং height সেট করা যেতে পারে। অর্থাৎ আমরা না সেট করে দিলে ব্রাউজার ডিফল্টভাবে নিজ থেকে width এবং height সেট করে নেয়। এছাড়াও দৈর্ঘ্য নির্ণয়ের বিভিন্ন একক যেমনঃ px, cm, % ইত্যাদি ব্যবহার করেও সেট করা যায়।
এই এলিমেন্টে width 100% এবং height 60px সেট করা হয়েছে।
kt_satt_skill_example_id=483
বিঃদ্রঃ width এবং height প্রোপার্টির মধ্যে padding, border এবং margin অন্তুর্ভূক্ত নয়। width এবং height প্রোপার্টি এলিমেন্টের প্যাডিং, বর্ডার এবং মার্জিনের ভিতরে width/height সেট করে।
max-width সেট করা
একটি এলিমেন্টের maximum width সেট করার জন্য max-width প্রোপার্টিটি ব্যবহার করা হয়।
দৈর্ঘ্য নির্ণয়ের বিভিন্ন একক যেমনঃ px, cm ইত্যাদি অথবা পারসেন্ট(%) ব্যবহার করে একটি এলিমেন্টের max-width সেট করা যেতে পারে। অথবা max-width এর ভ্যালু none সেট করা যেতে পারে। অর্থাৎ ডিফল্টভাবে যার কোনো কোন maximum width থাকবে না।
জেনে রাখা ভাল যে, যখন ব্রাউজার উইন্ডো থেকে এলিমেন্টের width বড় হয় তখন ব্রাউজার এলিমেন্টটিতে একটি হরিজন্টাল স্ক্রলবার যুক্ত করে নেয়।
এক্ষেত্রে max-width প্রোপার্টিটি ব্যবহার করে এই সমস্যার সমাধান করা যায়।
বিঃদ্রঃ আমাদের এই অধ্যায়ে ব্যবহৃত div দুটির মধ্যে পার্থক্য দেখার জন্য ব্রাউজার উইন্ডোর প্রস্থ(width) ৫০০px থেকে ছোট করুন।
এই এলিমেন্টটিতে height 100px এবং max-width 500px সেট করা হয়েছে
বিঃদ্রঃ max-width প্রোপার্টির ভ্যালু width প্রোপার্টির ভ্যালুকে ওভাররাইড(override) করে।
kt_satt_skill_example_id=485
সিএসএস বক্স মডেল
সকল এইচটিএমএল এলিমেন্টকে বক্স হিসেবে বিবেচনা করা যেতে পারে। আমরা যখন সিএসএসের মাধ্যমে ওয়েবপেজের ডিজাইন এবং লেআউট নিয়ে কথা বলি, তখন একটি টার্ম আমাদের কাছে চলে আসে তা হলো "box model"।
বক্স মডেল স্বাভাবিকভাবেই একটি বক্স যা প্রত্যেকটি এইচটিএমএল এলিমেন্টকে একটি বক্সের মধ্যে মুড়িয়ে দেয়। ইহা মার্জিন, বর্ডার, পেডিং এবং প্রকৃত কন্টেন্ট নিয়ে গঠিত হয়। নিচে ছবির মাধ্যেম বক্স মডেলের ব্যখ্যা দেওয়া হলঃ
উপরের ছবির বিভিন্ন অংশের ব্যাখ্যাঃ
- কন্টেন্ট - যা বক্সের কন্টেন্ট, যেখানে টেক্সট এবং ছবি প্রদর্শিত হয়।
- প্যাডিং - যা কন্টেন্টের চারপাশে ফাঁকা অংশের সৃষ্টি করে এবং ইহা স্বচ্ছ।
- বর্ডার - যা প্যাডিং এবং কন্টেন্টের চতুর্দিকে থাকে।
- মার্জিন - যা বর্ডারের বাহিরে ফাঁকা অংশের সৃষ্টি করে। প্যাডিং এর মত ইহাও স্বচ্ছ।
আমরা বক্স মডেল ব্যবহার করেও একটি এলিমেন্টের চারপাশে বর্ডার সেট করতে পারি এবং এলিমেন্টের মধ্যে স্পেস(space) রাখতে পারি।
kt_satt_skill_example_id=500
width এবং height সেট করা
প্রত্যেকটি ব্রাউজারের জন্য এলিমেন্টের প্রস্থ(width) এবং দৈর্ঘ্য(height) সঠিকভাবে সেট করতে হলে আপনাকে অবশ্যই বক্স মডেলের ব্যবহার সম্পর্কে জানতে হবে।
বিঃদ্রঃ সিএসএস এর মাধ্যমে আপনি যখন একটি এলিমেন্টের দৈর্ঘ্য এবং প্রস্থ সেট করেন, তখন শুধুমাত্র কন্টেন্টের আয়তনের দৈর্ঘ্য এবং প্রস্থ সেট করেন।
কিন্তু একটি এলিমেন্টের সম্পূর্ণ আয়তন সেট করতে এর দৈর্ঘ্য এবং প্রস্থের সহিত আপনাকে অবশ্যই প্যাডিং, বর্ডার এবং মার্জিন সংযুক্ত করতে হবে।
ধরুন, আপনি একটি < div> এলিমেন্টকে স্টাইল করতে চাচ্ছেন যার width হবে 350px, তাহলে সেটিকে নিচের উদাহরণের মত স্টাইল করতে পারেনঃ
kt_satt_skill_example_id=504
উপরের ছবিটির প্রস্থ ৩৬০ পিক্সেল এবং সম্পূর্ণ এলিমেন্টটির প্রস্থও ৩৬০ পিক্সেল।
এখানে উপরের উদাহরণের সহজ হিসাব দেখানো হলোঃ
320px (width)
+ 30px (বাম + ডান পাশের প্যাডিং)
+ 10px (বাম + ডান পাশের বর্ডার)
+ 0px (বাম + ডান পাশের মার্জিন)
= 360px
একটি এলিমেন্টের সম্পূর্ণ প্রস্থ হিসাবের সূত্র হলোঃ
এলিমেন্টের সম্পূর্ণ প্রস্থ = কন্টেন্টের প্রস্থ + বাম পাশের প্যাডিং + ডান পাশের প্যাডিং + বাম পাশের বর্ডার + ডান পাশের বর্ডার + বাম পাশের মার্জিন + ডান পাশের মার্জিন
একটি এলিমেন্টের সম্পূর্ণ উচ্চতা হিসাবের সূত্র হলোঃ
এলিমেন্টের সম্পূর্ণ উচ্চতা = কন্টেন্টের উচ্চতা + উপরের প্যাডিংন + নিচের প্যাডিং + উপরের বর্ডার + নিচের বর্ডার + উপরের মার্জিন + নিচের মার্জিন
বিঃদ্রঃ ইন্টারনেট এক্সপ্লোরার-৮ এবং এর আগের ভার্সনগুলোতে width প্রোপার্টির মধ্যে padding এবং border যুক্ত হয়ে যায়। তাই এই সমস্যা সমাধানের জন্য এইচটিএমএল পেজে < !DOCTYPE html> যুক্ত করুন।
সিএসএস আউটলাইন
সিএসএস outline প্রোপার্টির মাধ্যমে আউটলাইনের স্টাইল, কালার এবং প্রস্থ সেট করা হয়।
আউটলাইন হলো একটি লাইন যা একটি এলিমেন্টকে আলাদাভাবে উপস্থাপন করার জন্য এলিমেন্টের বর্ডারের বাহিরে আঁকা হয়।
যাইহোক, আউটলাইন প্রোপার্টি বর্ডার হতে ভিন্ন একটি প্রোপার্টি। আউটলাইন একটি এলিমেন্টের মার্জিনের অংশ নয় এবং আউটলাইনের প্রস্থের(width) মাধ্যমে এলিমেন্টের সম্পূর্ন দৈর্ঘ্য এবং প্রস্থের উপরে কোন প্রভাব পড়ে না।
এই এলিমেন্টটিতে একটি লাল সরু বর্ডার এবং 7px চওড়া সবুজ কালারের একটি ডট আউটলাইন সেট করা হয়েছে।
এক নজরে সিএসএস আউটলাইন প্রোপার্টিসমূহ
একটি ডিক্লেয়ারেশনের মাধ্যমে আউটলাইনের সবগুলো প্রোপার্টি সেট করার জন্য একটি শর্টহ্যান্ড প্রোপার্টি।
আউটলাইনের স্টাইল সেট করার জন্য ব্যবহার করা হয়।
আউটলাইনের প্রস্থ(width) সেট করার জন্য ব্যবহার করা হয়।
আউটলাইনের কালার সেট করার জন্য ব্যবহার করা হয়।
একটি এলিমেন্টের আউটলাইন এবং বর্ডারের মাঝখানে স্পেস বা ফাঁকা রাখার জন্য এটি ব্যবহার করা হয়।
আউটলাইন স্টাইল
outline-style প্রোপার্টি দ্বারা আউটলাইনের স্টাইল নির্ধারণ করা হয়।
outline-style প্রোপার্টিতে নিচের ভ্যালুসমূহ ব্যবহার করা যায়ঃ
solid- একটি সলিড আউটলাইন নির্দেশ করে।double- একটি ডাবল আউটলাইন নির্দেশ করে।dotted- একটি ডটেড আউটলাইন নির্দেশ করে।dashed- একটি ড্যাশ আউটলাইন নির্দেশ করে।inset- একটি 3D inset আউটলাইন নির্দেশ করে।outline-colorএর ভ্যালুর উপর প্রভাব নির্ভর করে।outset- একটি 3D outset আউটলাইন নির্দেশ করে।outline-colorএর ভ্যালুর উপর প্রভাব নির্ভর করে।groove- একটি 3D groove আউটলাইন নির্দেশ করে।outline-colorএর ভ্যালুর উপর প্রভাব নির্ভর করে।ridge- একটি 3D ridge আউটলাইন নির্দেশ করে।outline-colorএর ভ্যালুর উপর প্রভাব নির্ভর করে।hidden- আউটলাইনকে হাইড করার জন্য ব্যবহার করা হয়।none- কোন আউটলাইন না প্রদর্শনের জন্য ব্যবহার করা হয়।
এই উদাহরণে, প্রত্যেকটি < p> এলিমেন্টের চারপাশে একটি সরু কালো বর্ডার সেট করে, ভিন্ন ভিন্ন outline-style প্রোপার্টির ভ্যালুসমূহ সেট করে দেখানো হলোঃ
kt_satt_skill_example_id=525
আউটলাইনের প্রস্থ(width)
আউটলাইনের প্রস্থ সেট করার জন্য outline-width প্রোপার্টিটি ব্যবহার করা হয়।
সিএসএসে প্রস্থ নির্ণয়ের বিভিন্ন একক যেমন- px, pt, cm, em ইত্যাদি ব্যবহার করে আউটলাইনের প্রস্থ সেট করা হয় অথবা পূর্ব নির্দিষ্ট ভ্যালু যেমনঃ- thin, medium এবং thick ইত্যাদি ব্যবহার করেও আউটলাইনের প্রস্থ সেট করা যায়।
kt_satt_skill_example_id=527
আউটলাইন কালার
আউটলাইনের কালার সেট করার জন্য outline-color প্রোপার্টিটি ব্যবহার করা হয়।
নিচের যেকোনো একটি পদ্ধতি ব্যবহার করে কালার সেট করা যায়ঃ
- name - কালারের নাম ব্যবহার করে, যেমন
"red" - Hex - হেক্সাডেসিমাল ভ্যালু ব্যবহার করে, যেমন
"#ff0000" - RGB - RGB ভ্যালু ব্যবহার করে, যেমন
“rgb(255,0,0)”
kt_satt_skill_example_id=528
আউটলাইন শর্টকাট প্রোপার্টি
আপনি উপরের উদাহরণ গুলো লক্ষ্য করলে দেখবেন যে, আউটলাইনের কিছু উপ-আউটলাইন প্রোপার্টি রয়েছে এবং এক্ষেত্রে কোডের দৈর্ঘ্যও বেড়ে গিয়েছে।
তাই কোড সংক্ষিপ্ত করার জন্য, একটি আউটলাইন প্রোপার্টির মধ্যে সবগুলো আউটলাইন প্রোপার্টি ব্যবহার করা হয়।
নিচের উপ-আউটলাইন প্রোপার্টিসমূহের শর্টকাট প্রোপার্টি হলো outline
outline-widthoutline-style(আবশ্যক)outline-color
kt_satt_skill_example_id=529
টেক্সট ফরমেট
এই টেক্সটগুলোকে স্টাইল করার জন্য কিছু টেক্সট ফরম্যাট প্রোপার্টি ব্যবহার করা হয়েছে। হেডিং-এ text-align, text-transform এবং color প্রোপার্টি ব্যবহার করা হয়েছে। প্যারাগ্রাফে ইনডেন্ট এলাইন এবং ক্যারেক্টার স্পেসিং নির্দিষ্ট করে দেয়া হয়েছে।
এক নজরে সিএসএস টেক্সট প্রোপার্টিসমূহ
color
টেক্সটের কালার সেট করার জন্য ব্যবহার করা হয়।
টেক্সটের ডিরেকশন সেট করার জন্য ব্যবহার করা হয়।
শব্দের মধ্যে দুটি অক্ষরের মধ্যবর্তী স্পেস বৃদ্ধি বা হ্রাস করার জন্য ব্যবহার করা হয়।
দুটি লাইনের মধ্যবর্তী উচ্চতা সেট করার জন্য ব্যবহার করা হয়।
টেক্সটের হরিজন্টাল এলাইনমেন্ট সেট করার জন্য ব্যবহার করা হয়।
টেক্সটকে সাজসজ্জা বা ডেকোরেটশন করার জন্য ব্যবহার করা হয়।
একটি টেক্সট ব্লকের প্রথম লাইনটির ইন্ডেন্টেশন সেট করার জন্য ব্যবহার করা হয়।
টেক্সটের মধ্যে স্যাডো ইফেক্ট তৈরি করার জন্য ব্যবহার করা হয়।
টেক্সট ক্যাপিটাইলেজশন নিয়ন্ত্রন করার জন্য ব্যবহার করা হয়।
direction প্রোপার্টির সাথে ব্যবহৃত হয়ে একই ডকুমেন্টের মধ্যে বিভিন্ন ভাষা সাপোর্ট করানোর জন্য। টেক্সট ওভাররাইড হবে কিনা তা সেট বা রিটার্ন করে।
এলিমেন্টের ভার্টিকাল এলাইনমেন্ট সেট করার জন্য ব্যবহার করা হয়।
এলিমেন্ট গুলোর মধ্যে কতগুলো হোয়াইট স্পেস নেওয়া হবে তা ঠিক করার জন্য ব্যবহার করা হয়।
বাক্যের মধ্যে দুটি শব্দের মধ্যবর্তী স্পেস বৃদ্ধি বা হ্রাস করার জন্য ব্যবহার করা হয়।
color প্রোপার্টি
টেক্সটকে বিভিন্ন কালার করার জন্য color প্রোপার্টি ব্যবহার করা হয়।
নিচের যেকোনো একটি পদ্ধতি ব্যবহার করে কালার সেট করা যায়ঃ
- name - কালারের নাম ব্যবহার করে, যেমন
"green" - Hex - হেক্সাডেসিমাল ভ্যালু ব্যবহার করে, যেমন
"#00ff00" - RGB - RGB ভ্যালু ব্যবহার করে, যেমন
“rgb(0,255,0)”
কালার ভ্যালু সম্পর্কে সম্পূর্ণ ধারনা পাওয়ার জন্য আমাদের সিএসএস কালার ভ্যালু লিংক থেকে ঘুরে আসুন।
একটি পেজের ডিফল্ট টেক্সট কালার সেট করার জন্য body সিলেক্টর ব্যবহার করতে হয়।
নিচের উদাহরণে body সিলেক্টর দ্বারা একটি পেজের ডিফল্ট টেক্সট কালার blue সেট করা হলো। ফলে ডিফল্টভাবে এই পেজের টেক্সট কালার হবে blue।
kt_satt_skill_example_id=538
text-align প্রোপার্টি
text-align প্রোপার্টি ব্যবহার করে টেক্সটের আনুভূমিক(horizontal) এলাইনমেন্ট সেট করা হয়।
টেক্সটে left, right, centered অথবা justified এই চার ধরনের এলাইনমেন্ট ব্যবহার করা যায়।
নিচের উদাহরণে টেক্সট এর জন্য center, left এবং right এলাইন ব্যবহার করা হয়েছে। টেক্সট এর নির্দেশনা বাম থেকে ডানে হলে left এলাইনমেন্ট ডিফল্ট হবে এবং টেক্সট এর নির্দেশনা ডান থেকে বামে হলে right এলাইনমেন্ট ডিফল্ট হবে।
kt_satt_skill_example_id=544
যখন text-align প্রোপার্টির ভ্যালু "justify" সেট করা হয়, তখন প্রত্যেক লাইন বামে ও ডানে সমানভাবে প্রসারিত হয়। অনেকটা ম্যাগাজিন এবং পত্রিকার মত বামে ও ডানে মার্জিন নিয়ে নেয়।
kt_satt_skill_example_id=546
text-decoration প্রোপার্টি
টেক্সট ডেকোরেশন সেট করতে বা মুছে ফেলার জন্য text-decoration প্রোপার্টিটি ব্যবহার করা হয়।
টেক্সটের নিচের আন্ডারলাইন মুছে ফেলার জন্য text-decoration: none; ব্যবহার করা হয়।
kt_satt_skill_example_id=552
বিঃদ্রঃ সাধারণত হাইপারলিংক যুক্ত টেক্সট আন্ডারলাইন হয়। এই উদাহরণটিতে text-decoration: none; ব্যবহার করায় লিংকটিতে কোন আন্ডারলাইন হয়নি।
টেক্সট ডেকোরেশনের জন্য text-decoration-এ অন্যান্য যে ভ্যালু গুলো ব্যবহৃত হয়ঃ
kt_satt_skill_example_id=556
text-transform প্রোপার্টি
টেক্সটকে সাধারণত বড় এবং ছোট হাতের অক্ষরে উপস্থাপন করার জন্য text-transform প্রোপার্টিটি ব্যবহার করা হয়।
এটি সাধারণত বড় হাতের অক্ষর(uppercase)-কে ছোট হাতের অক্ষরে(lowercase) বা ছোট হাতের অক্ষরকে বড় হাতের অক্ষরে রুপান্তরিত করার জন্য অথবা শব্দের প্রথম বর্ণকে বড় হাতের অক্ষরে লেখার জন্য ব্যবহার করা হয়ঃ
kt_satt_skill_example_id=558
text-indent প্রোপার্টি
টেক্সটের প্রথম লাইনে ইনডেন্ট দেওয়ার জন্য text-indent প্রোপার্টি ব্যবহার করা হয়।
kt_satt_skill_example_id=561
letter-spacing প্রোপার্টি
টেক্সটের মধ্যে দুটি অক্ষরের মধ্যবর্তী দুরত্ব বাড়ানো বা কমানোর জন্য letter-spacing প্রোপার্টিটি ব্যবহার করা হয়।
নিচের উদাহরণে দেখানো হলো কিভাবে অক্ষরের স্পেস বাড়ানো বা কমানো যায়ঃ
kt_satt_skill_example_id=563
letter-spacing প্রোপার্টি
টেক্সটের মধ্যে দুটি অক্ষরের মধ্যবর্তী দুরত্ব বাড়ানো বা কমানোর জন্য letter-spacing প্রোপার্টিটি ব্যবহার করা হয়।
নিচের উদাহরণে দেখানো হলো কিভাবে অক্ষরের স্পেস বাড়ানো বা কমানো যায়ঃ
kt_satt_skill_example_id=568
direction প্রোপার্টি
একটি এলিমেন্টের টেক্সটের ডিরেকশন পরিবর্তন করার জন্য direction প্রোপার্টিটি ব্যবহার করা হয়।
kt_satt_skill_example_id=569
word-spacing প্রোপার্টি
বাক্যের মধ্যে দুটি শব্দের মধ্যবর্তী স্পেস বাড়ানো বা কমানোর জন্য word-spacing প্রোপার্টি ব্যবহার করা হয়।
নিচের উদাহরণের মাধ্যমে দেখানো হলো কিভাবে দুটি শব্দের মধ্যবর্তী স্পেস বাড়ানো বা কমানো যায়ঃ
kt_satt_skill_example_id=573
টেক্সটের জন্য ফন্ট ফ্যামিলি, গাঢ়ত্ব, সাইজ এবং স্টাইল নির্ধারণ করতে সিএসএস font প্রোপার্টি ব্যবহার করা হয়।
Serif এবং Sans-serif ফন্টের মধ্যে পার্থক্যঃ
এক নজরে সিএসএস ফন্ট প্রোপার্টিসমূহ
একটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো ফন্ট প্রোপার্টি সেট করার একটি শর্টহ্যান্ড প্রোপার্টি।
টেক্সটের ফন্ট সাইজ সেট করার জন্য ব্যবহার করা হয়।
টেক্সটের ফন্ট ফ্যামিলি সেট করার জন্য ব্যবহার করা হয়।
টেক্সটের ফন্ট স্টাইল সেট করার জন্য ব্যবহার করা হয়।
টেক্সটের ফন্টসমূহ small-caps আকারে দেখাবে কিনা তা নির্ধারণ করে।
ফন্টকে গাঢ় বা হালকাভাবে উপস্থাপন করে।
সিএসএস ফন্ট ফ্যামিলি
সিএসএসের মধ্যে দুই ধরনের ফন্ট ফ্যামিলি রয়েছেঃ
- generic family - দেখতে প্রায় একইরকম ফন্ট ফ্যামিলির একটি গ্রুপ। যেমন-
"Serif","Monospace"ইত্যাদি। - font family - একটি নির্দিষ্ট ফন্ট ফ্যামিলি যেমনঃ
"Times New Roman","Arial"ইত্যাদি।
বিঃদ্রঃ কম্পিঊটারের স্ক্রিনে serif ফন্টের চেয়ে sans-serif ফন্ট খুব সহজে পড়া যায়
ফন্ট ফ্যামিলি
font-family প্রোপার্টির মাধ্যমে টেক্সটের ফন্ট ফ্যামিলি সেট করা হয়।
font-family প্রোপার্টিতে "fallback" সিস্টেম হিসাবে বিভিন্ন ফন্ট এর নাম রাখা উচিত। যদি কোন ব্রাউজারে প্রথম ফন্টটি সাপোর্ট না করে, তাহলে তা পরবর্তী ফন্টের জন্য চেষ্টা করে এবং এভাবে চলতে থাকে।
আপনার পছন্দ অনুযায়ী ফন্টের নাম দিয়ে শুরু করুন এবং generic family দ্বারা শেষ করুন। কারণ যদি অন্য কোন ফন্ট না কাজ করে তাহলে ব্রাউজার তার মত করে generic family'র মধ্য থেকে একই ধরণের ফন্ট বাছাই করে নিবে।
বিঃদ্রঃ যদি কোনো ফন্ট ফ্যামিলির নাম এক শব্দের চেয়ে বেশি হয় তাহলে এটাকে অবশ্যই কোটেশন মার্ক(" ") এর মধ্যে রাখতে হবে। যেমনঃ "Times New Roman"
একের অধিক ফন্ট ফ্যামিলি থাকলে কমা(,) দ্বারা সেগুলোকে আলাদা করতে হবেঃ
kt_satt_skill_example_id=586
সচরাচর ব্যবহৃত ফন্টসমূহ সম্বন্ধে জানতে আমাদের ওয়েব সেফ ফন্টের সমাহার পেজটি ভিজিট করুন।
font-style প্রোপার্টি
অধিকাংশ ক্ষেত্রেই ফন্টসমূহকে হালকা বাঁকাভাবে(italic) উপস্থাপন করার জন্য font-style প্রোপার্টিটি ব্যবহার করা হয়।
এই প্রোপার্টিতে ৩টি ভ্যালু ব্যবহার করা যায়ঃ
normal- টেক্সটকে সাধারণভাবে দেখানো হয়।italic- টেক্সটকে ইটালিক স্টাইলে দেখানো হয়।oblique- এটি italic এর মত টেক্সটকে বাঁকা করে। কিনতু ইটালিকের তুলনায় ইহা কম সমর্থিত।
kt_satt_skill_example_id=590
font-size প্রোপার্টি
টেক্সটের সাইজ নির্ধারণ করার জন্য font-size প্রোপার্টি ব্যবহার করা হয়।
ওয়েব ডিজাইনিং এর ক্ষেত্রে টেক্সটের আকার(size) নির্ধারণ করা খুবই গুরুত্বপূর্ণ। যাইহোক, font-size প্রোপার্টি ব্যবহার করে প্যারাগ্রাফকে হেডিং এর সাইজে অথবা হেডিং কে প্যারাগ্রাফের সাইজে করা মোটেও উচিত হবে না।
সবসময় প্রয়োজন অনুযায়ী উপযুক্ত এইচটিএমএল ট্যাগ ব্যবহার করা উচিত। যেমন- হেডিং এর জন্য থেকে ট্যাগ এবং প্যারাগ্রাফ এর জন্য ট্যাগ ব্যবহার করা উচিত।
font-size প্রোপার্টির ভ্যালু absolute অথবা relative হতে পারে।
বিঃদ্রঃ আপনি যদি ফন্টের সাইজ না সেট করে দেন, তাহলে ব্রাউজার থেকে ডিফল্টভাবে সাইজ নিয়ে নিবে।
যেমন- প্যারাগ্রাফ এর জন্য ডিফল্ট সাইজ হলো 16px (16px = 1em)।
Px এককে ফন্ট সাইজ নির্ধারণ
Px একক ব্যবহার করে আপনি আপনার ইচ্ছা মত টেক্সট এর আকার নির্ধারণ করতে পারেনঃ
kt_satt_skill_example_id=594
Em এককে ফন্ট সাইজ নির্ধারণ
একজন ইউজারকে ব্রাউজার মেনু থেকে টেক্সট রিসাইজ(resize) করতে দেওয়ার জন্য অনেক ডেভেলপারই px এর পরিবর্তে em একক ব্যবহার করেন।
ফন্টের সাইজ নির্ধারণে em একক W3C সমর্থিত।
একটি ব্রাউজারের চলমান ফন্ট সাইজ হলো 1em এর সমান এবং ব্রাউজারের ডিফল্ট টেক্সট সাইজ হল 16px। সুতরাং 1em এর ডিফল্ট সাইজ = 16px।
পিক্সেলকে em এ কনভার্টের জন্য pixels/16 =em ফর্মূলা ব্যবহার করা হয়।
font-weight প্রোপার্টি
ফন্ট গাঢ় বা হালকা করার জন্য font-weight প্রোপার্টি ব্যবহার করা হয়ঃ
kt_satt_skill_example_id=599
font-variant প্রোপার্টি
টেক্সটের ফন্টসমূহ small-caps আকারে দেখাবে কিনা font-variant প্রোপার্টির মাধ্যমে তা নির্ধারণ করা হয়।
small-caps ফন্টে সকল ছোট অক্ষরের বর্ণ গুলো বড় অক্ষরের বর্ণে রুপান্তরিত হয়। রুপান্তরিত বড় অক্ষরের বর্ণগুলো প্রকৃত সাইজের চেয়ে ছোট হয়ে বড় অক্ষর হিসাবে ব্রাউজারে প্রদর্শিত হয়।
kt_satt_skill_example_id=601
লিংক স্টাইল
যেকোনো সিএসএস প্রোপার্টি যেমন- color, background-color, margin ইত্যাদি প্রোপার্টির মাধ্যমে লিংকের স্টাইল করা যায়।
kt_satt_skill_example_id=610
এছাড়াও লিংকটি কি অবস্থায়(state) আছে তার উপর ভিত্তি করেও পৃথকভাবে লিংকের স্টাইল করা যেতে পারে।
একটি লিংক সচরাচর চারটি অবস্থায় থাকে।
লিংকের অবস্থাসমূহ নিম্নে তুলে ধরা হলোঃ
a:link- এটি একটি স্বাভাবিক লিংক যা ইউজার কর্তৃক এখনো প্রদর্শিতি(visited) হয় নি।a:visited- ইউজার কর্তৃক পরিদর্শিত(visited) একটি লিংক।a:hover- ইউজার কর্তৃক মাউজ কার্সর লিংকের উপর রাখা অবস্থাকে নির্দেশ করে।a:active- ইউজার কর্তৃক ক্লিক করা হয়েছে এমন একটি লিংক।
kt_satt_skill_example_id=611
বিঃদ্রঃ ভালো ফলাফলের জন্য লিংক স্টাইলের এই ক্রম অবশ্যই অনুসরণ করতে হবে।
লিংকের বিভিন্ন অবস্থার জন্য পৃথকভাবে স্টাইল সেট করতে হলে নিচের নিয়ম দুটি মেনে চলতে হবে।
a:linkএবংa:visitedএর পরেa:hoverব্যবহার করতে হবে।a:hoverএর পরেa:activeব্যবহার করতে হবে।
background-color প্রোপার্টি
লিংকের ব্যাকগ্রাউন্ড-কালার সেট করার জন্য background-color প্রোপার্টি ব্যবহার করা হয়।
a:link {
background-color: lawngreen;
}
a:visited {
background-color: green;
}
a:hover {
background-color: lightsalmon;
}
a:active {
background-color: hotpink;
}text-decoration প্রোপার্টি
লিংক থেকে আন্ডারলাইন মুছে ফেলার জন্য text-decoration প্রোপার্টির ভ্যালু none ব্যবহার করা হয়।
kt_satt_skill_example_id=615
লিংক বাটন
লিংককে বক্স বা বাটনের মত তৈরি করার জন্য অতিরিক্ত যে সিএসএস প্রোপার্টি ব্যবহার করা হয় তা নিম্নের উদাহরণে দেখানো হলোঃ
kt_satt_skill_example_id=620
বিঃদ্রঃ আমরা চাইলে এই বাটনটির মধ্যে লিংকের বিভিন্ন অবস্থা(state) প্রয়োগ করতে পারবো।
এইচটিএমএল লিস্টকে বিভিন্নভাবে মার্কিং করার জন্য সিএসএস list-* প্রোপার্টি ব্যবহার করা হয়।
এইচটিএমএল লিস্ট এবং সিএসএস লিস্ট প্রোপার্টি
এইচটিএমএলে সাধারণত দুই ধরনের লিস্ট রয়েছেঃ
- আন-অর্ডার লিস্ট (
< ul>): - লিস্ট আইটেম গুলোকে বুলেট চিহ্ন দিয়ে মার্কিং করে। - অর্ডার লিস্ট (
< ol>): - লিস্ট আইটেম গুলোকে সংখ্যা বা অক্ষর দিয়ে মার্কিং করে।
সিএসএস list প্রোপার্টির মাধ্যমে আপনি নিম্নোক্ত স্টাইলসমূহ করতে পারবেনঃ
- অর্ডার লিস্টের আইটেমগুলোকে বিভিন্নভাবে মার্কিং করতে পারবেন।
- আন-অর্ডার লিস্টের আইটেমগুলোকে বিভিন্নভাবে মার্কিং করতে পারবেন।
- ইমেজ দিয়ে লিস্ট আইটেমকে মার্কিং করতে পারবেন।
- লিস্ট এবং লিস্ট আইটেমে ব্যাকগ্রাউন্ড কালার সেট করতে পারবেন।
এক নজরে সিএসএস লিস্ট প্রোপার্টিসমূহ
| প্রোপার্টি | বর্ণনা |
|---|---|
list-style | একটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো লিস্ট প্রোপার্টি সেট করার জন্য একটি শর্টহ্যান্ড প্রোপার্টি। |
list-style-image | লিস্ট আইটেমে মার্কিং হিসেবে ইমেজ সেট করার জন্য ব্যবহার করা হয়। |
list-style-position | লিস্ট আইটেমের মার্কার কন্টেন্টের ভেতরে নাকি বাহিরে প্রদর্শিত হবে তা নির্ধারণ করে। |
list-style-type | লিস্ট আইটেমকে মার্কিং করার জন্য টাইপ নির্ধারণ করে। |
লিস্ট আইটেমকে বিভিন্নভাবে মার্কিং করার উপায়
লিস্টের আইটেমসমূহকে বিভিন্নভাবে মার্কিং করতে হলে সিএসএস list-style-type প্রোপার্টিটি ব্যবহার করতে হবে।
নিচের উদাহরণে লিস্টের আইটেমসমূহে কিছু মার্কারের ব্যবহার দেখানো হলোঃ
kt_satt_skill_example_id=635
বিঃদ্রঃ list-style-type প্রোপার্টির কিছু ভ্যালু আন-অর্ডার লিস্টের জন্য এবং কিছু ভ্যালু অর্ডার লিস্টের জন্য ব্যবহৃত হয়।
ইমেজ দিয়ে লিস্ট আইটেম মার্কিং
ইমেজ দিয়ে লিস্ট আইটেমকেে মার্কিং করতে হলে সিএসএস list-style-image প্রোপার্টিটি ব্যবহার করতে হয়।
kt_satt_skill_example_id=637
লিস্ট আইটেমে মার্কারের পজিশন
লিস্ট আইটেমে মার্কার কন্টেন্টের ভেতরে প্রদর্শিত হবে নাকি বাহিরে প্রদর্শিত হবে তা সেট করার জন্য সিএসএস list-style-position প্রোপার্টিটি ব্যবহার করা হয়।
kt_satt_skill_example_id=640
লিস্টকে কালার করা
লিস্ট আইটেমগুলোকে আরোও দর্শনীয় করে উপস্থাপন করতে আমরা লিস্ট এবং লিস্ট আইটেমের ব্যাকগ্রাউন্ডকে কালার করতে পারি।
< ol> বা < ul> ট্যাগে কোনো স্টাইল যোগ করলে সম্পূর্ণ লিস্টেই এর প্রভাব পড়ে। কিন্তু < li> ট্যাগে স্টাইল যোগ করে আমরা লিস্ট আইটেমসমূহকে পৃথকভাবে স্টাইল করতে পারি।
kt_satt_skill_example_id=643
লিস্ট শটকার্ট প্রোপার্টি
list-style প্রোপার্টি হল লিস্টের জন্য একটি শর্টকার্ট প্রোপার্টি। একটি ডিক্লেয়ারেশনের মধ্যে সবগুলো লিস্ট প্রোপার্টি সেট করার জন্য এই প্রোপার্টি ব্যবহার করতে হয়।
শর্টকার্ট প্রোপার্টি ব্যবহার করতে হলে প্রোপার্টির নিম্নোক্ত ধারা মেনে চলতে হবেঃ
list-style-type:- লিস্ট আইটেমকে মার্কিং করার জন্য যদিlist-style-imageপ্রোপার্টি সেট করা হয়, কিন্তু কোনো কারণে যদি ইমেজ না প্রদর্শিত হয় তাহলেlist-style-typeপ্রোপার্টির ভ্যালু প্রদর্শিত হবে।list-style-position:- লিস্ট আইটেমে মার্কার কন্টেন্টের ভেতরে না বাহিরে প্রদর্শিত হবে তা ঠিক করে দেয়।list-style-image:- ইমেজ দিয়ে লিস্ট আইটেমকেে মার্কিং করার জন্য এটি ব্যবহার করা হয়।
উপরের কোন একটি প্রোপার্টির ভ্যালু যদি বাদ পড়ে, তাহলে বাদ পড়া প্রোপার্টির জন্য ডিফল্ট ভ্যালু যুক্ত হবে।
kt_satt_skill_example_id=645
নিচে যে সুন্দর একটি এইচটিএমএল টেবিল দেখতে পাচ্ছেন তা সিএসএস দিয়ে স্টাইল করা হয়েছে।
এই অধ্যায়ে আমরা ধাপে ধাপে এধরনের টেবিল তৈরি করা শিখবোঃ
| খেলোয়াড়ের নাম | দলীয় অবস্থান | দেশ |
|---|---|---|
| মাশরাফি বিন মুর্তজা | ক্যাপ্টেন এবং বোলার | বাংলাদেশ |
| সাকিব আল হাসান | অলরাউন্ডার | বাংলাদেশ |
| ডু প্লেসিস | ক্যাপ্টেন এবং ব্যাটসম্যান | দক্ষিন আফ্রিকা |
| বিরাট কোহলি | ব্যাটসম্যান | ভারত |
একনজরে সিএসএসের টেবিল প্রোপার্টিসমূহ
| প্রোপার্টি | বর্ণনা |
|---|---|
border | একটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো বর্ডার প্রোপার্টি সেট করার জন্য একটি শর্টকাট প্রোপার্টি। |
border-collapse | টেবিলের বর্ডার কলাপ্স হবে কিনা তা নির্ধারণ করে। |
border-spacing | পাশাপাশি দুটি সেলের বর্ডারের দূরত্ব নির্ধারণ করে। |
caption-side | টেবিল ক্যাপশনের অবস্থান নির্ধারণ করে। |
empty-cells | একটি টেবিলের মধ্যে খালি সেল এর বর্ডার এবং ব্যাকগ্রাউন্ড প্রদর্শিত হবে কিনা তা নির্ধারণ করে। |
table-layout | একটি টেবিলের লেআউট নির্ধারণ করে। |
টেবিলে বর্ডার সেট
< table> এর চারপাশে বর্ডার সেট করার জন্য সিএসএস border প্রোপার্টি ব্যবহার করতে হয়।
kt_satt_skill_example_id=695
উপরের উদাহরণে লক্ষ্য করলে দেখবেন, শুধুমাত্র < table> এর চারপাশে বর্ডার আছে। কিন্তু < th> এবং < td> এলিমেন্টে কোনো বর্ডার নাই।
< table>, < th> এবং < td> এলিমেন্টে বর্ডার দিতে হলে এদের প্রত্যেকটিতে পৃথকভাবে border প্রোপার্টি সেট করতে হবে।
kt_satt_skill_example_id=701
উপরের উদাহরণে লক্ষ্য করলে দেখবেন, টেবিলের মধ্যে ডাবল বর্ডার দেখা যাচ্ছে। কারণ টেবিলের বর্ডারসমূহ একটি একক বর্ডারে কলাপ্স হবে কিনা অর্থাৎ দুটি বর্ডার এক হয়ে যাবে কিনা তা নির্ধারণ করার জন্য kt_satt_skill_example_id=702 উপরের উদাহরনে টেবিলের ডিফল্টভাবে নিচের উদাহরনে kt_satt_skill_example_id=703 বিঃদ্রঃ এছাড়াও আপনি চাইলে কন্টেন্টকে ভার্টিক্যাললি এ্যালাইন করতে পারবেন। টেবিলের প্রস্থ এবং উচ্চতা নির্ধারণ করার জন্য সিএসএস নিচের উদাহরনে kt_satt_skill_example_id=707 টেবিলের বর্ডার এবং কন্টেন্ট এর মধ্যে স্পেস নিয়ন্ত্রন করার জন্য টেবিলের সারিগুলোকে অনুভূমিক ভাবে বিভাজন করার জন্য kt_satt_skill_example_id=714 নিচের উদাহরণে kt_satt_skill_example_id=720 টেবিলকে জেব্রা স্টাইল করতে হলে kt_satt_skill_example_id=738 টেবিলের সারির উপর মাউস নেওয়ার পরে সারিকে হাইলাইট করার জন্য kt_satt_skill_example_id=732 টেবিলকে রেস্পন্সিভ করার জন্য kt_satt_skill_example_id=736 বিঃদ্রঃ রেসপন্সিভনেস বুঝার জন্য ব্রাউজারের উইন্ডো রিসাইজ করুন। সিএসএসের মাধ্যমে একটি ওয়েবপেজকে সুন্দরভাবে উপস্থাপনের জন্য সবচেয়ে বেশি ব্যবহৃত এবং গুরুত্বপূর্ন প্রোপার্টি হলো এইচটিএমএল এলিমেন্ট কিভাবে প্রদর্শিত হবে তা উল্লেখ করে। এইচটিএমএল এলিমেন্টটি দৃশ্যমান হবে কিনা তা উল্লেখ করে। একটি এলিমেন্টকে কিভাবে প্রদর্শন করানো হবে তা এলিমেন্টের ধরনের উপর ভিত্তি করে অধিকাংশ এইচটিএমএল এলিমেন্টেরই একটি ডিফল্ট display ভ্যালু রয়েছে। অধিকাংশ এলিমেন্টের ডিফল্ট ভ্যালু হলো একটি ইনলাইন এলিমেন্ট নতুন লাইনে শুরু হয় না এবং যতটুকু দৈর্ঘ্য প্রয়োজন ততটুকুই নেয়। এটি একটি প্যারাগ্রাফ এলিমেন্ট। এই প্যারাগ্রাফের মধ্যে ইনলাইন কয়েকটি ইনলাইন এলিমেন্ট নিম্নে দেখানো হলোঃ kt_satt_skill_example_id=745 এইচটিএমএল ব্লক-লেভেল(block-level) এলিমেন্ট সবসময়ই একটি নতুন লাইন দিয়ে শুরু হয় এবং এর কন্টেইনারের বাম পাশ থেকে ডান পাশ পর্যন্ত সম্পূর্ণ অংশ দখল করে। এটি একটি কয়েকটি ব্লক-লেভেল এলিমেন্ট নিম্নে দেখানো হলঃ kt_satt_skill_example_id=746 আমরা ইতিমধ্যেই দেখেছি যে, প্রত্যেকটি এইচটিএমএল এলিমেন্টের জন্য একটি ডিফল্ট display ভ্যালু ব্যবহৃত হয়। যেমন- এইচটিএমএল এলিমেন্ট সমূহকে আপনি আপনার মত করে উপস্থাপন করার জন্য একটি ইনলাইন এলিমেন্টকে একটি ব্লক লেভেল এলিমেন্ট অথবা একটি ব্লক লেভেল এলিমেন্টকে ইনলাইন এলিমেন্টে রূপান্তরিত করতে পারেন। এতে ওয়েবে স্ট্যান্ডার্ড ভঙ্গ হয় না। হরিজন্টাল মেনুবার তৈরি করার জন্য kt_satt_skill_example_id=747 বিঃদ্রঃ একটি এইচটিএমএল এলিমেন্ট কিভাবে প্রদর্শিত হবে তা ঠিক করে দেওয়ার জন্য সিএসএস kt_satt_skill_example_id=749 নিচের উদাহরণে kt_satt_skill_example_id=752 একটি এলিমেন্টকে ডিলেট না করে বা পূনরায় সৃষ্টি না করে লুকানো অথবা দেখানোর জন্য জাভাস্ক্রিপ্টের সাথে kt_satt_skill_example_id=754 এইচটিএমএল এলিমেন্টকে সুপ্ত(hidden) অবস্থায় রাখতে হলে প্রোপার্টি-ভ্যালু kt_satt_skill_example_id=756 পূর্ববর্তী অধ্যায় থেকে আমরা জেনেছি যে, একটি ব্লক-লেভেল এলিমেন্ট সবসময় সম্পূর্ণ প্রস্থ অর্থাৎ বাম এবং ডানদিকে যতটা সম্ভব জায়গা দখল করে। ব্লক লেভেল এলিমেন্টে এর পরে আপনি এলিমেন্টটিকে কন্টেইনারের মধ্যে অনুভূমিকভাবে সেন্টারে রাখতে চাইলে এক্ষেত্রে এলিমেন্টটি নির্দিষ্ট প্রস্থ দখল করবে এবং বাকী অংশটুকু উভয় পাশের মার্জিনের জন্য সমানভাবে ভাগ করে দিবে। এই এলিমেন্টের width(600px) থেকে ব্রাউজার উইন্ডো ছোট হলে উপরের অর্থাৎ ব্রাউজার একটি হরিজন্টাল স্ক্রলবার সৃষ্টি করবে। এই সমস্যা থেকে উত্তরণের জন্য বিঃদ্রঃ আমাদের এই অধ্যায়ে ব্যবহৃত নিচের উদাহরণে এদের ব্যবহার দেখানো হলোঃ kt_satt_skill_example_id=762 বিঃদ্রঃ দুটি একটি এলিমিন্টের পজিশন স্ট্যাটিক(static), রিলেটিভ(relative), ফিক্সড(fixed), এবসোলিউট(absolute) নাকি স্টিকি(sticky) হবে তা নির্ধারণ করার জন্য সিএসএস অর্থাৎ একটি এলিমেন্টের পজিশন সেট করার জন্য সিএসএস এরপরে এলিমেন্টগুলোর পজিশন ঠিক করে দেওয়ার জন্য যাইহোক, আপনি যদি প্রথমেই absolute পজিশনের ক্ষেত্রে একটি এলিমেন্ট যে বক্সের মধ্যে থাকে সেই বক্স এবং উক্ত এলিমেন্টের নিচ প্রান্তের মধ্যবর্তী দূরত্ব নির্ধারণ করে। absolute পজিশনে থাকা একটি এলিমেন্টের কতটুকু অংশ দৃশ্যমান হবে তা নির্ধারণ করে। কি ধরণের মাউস কার্সর প্রদর্শিত হবে তা নির্ধারণ করে। absolute পজিশনের ক্ষেত্রে একটি এলিমেন্ট যে বক্সের মধ্যে থাকে সেই বক্স এবং উক্ত এলিমেন্টের বাম প্রান্তের মধ্যবর্তী দূরত্ব নির্ধারণ করে। একটি এলিমেন্ট যদি তার কন্টেন্ট বক্স থেকে উপচে পড়ে(overflow হয়) তাহলে কি হবে তা নির্ধারণ করে। একটি এলিমেন্ট যদি তার কন্টেন্ট বক্স থেকে উপচে পড়ে(overflow হয়) তাহলে তার ডানে বা বামে কি হবে তা নির্ধারণ করে। একটি এলিমেন্ট যদি তার কন্টেন্ট বক্স থেকে উপচে পড়ে(overflow হয়) তাহলে তার উপরে বা নিচে কি হবে তা নির্ধারণ করে। একটি এলিমেন্টের পজিশনের ধরন নির্ধারণ করে। absolute পজিশনের ক্ষেত্রে একটি এলিমেন্ট যে বক্সের মধ্যে থাকে সেই বক্স এবং উক্ত এলিমেন্টের ডান প্রান্তের মধ্যবর্তী দূরত্ব নির্ধারণ করে। absolute পজিশনের ক্ষেত্রে একটি এলিমেন্ট যে বক্সের মধ্যে থাকে সেই বক্স এবং উক্ত এলিমেন্টের উপর প্রান্তের মধ্যবর্তী দূরত্ব নির্ধারণ করে। একটি এলিমেন্টের stack order সেট করে। এইচটিএমএল এলিমেন্টসমূহের ডিফল্টভাবে পজিশন স্ট্যাটিক থাকে। এলিমেন্টের পজিশন স্ট্যাটিক থাকলে kt_satt_skill_example_id=788 উপরের উদাহরণে সিলেক্টর এক্ষেত্রে এর পার্শ্ববর্তী অন্য এলিমেন্ট এসে এই ফাঁকা অংশ পূরণ করে না। অর্থাৎ ফাঁকা অংশ ফাঁকাই রয়ে যাবে। kt_satt_skill_example_id=792 উপরের উদাহরণে সিলেক্টর যাই হোক, যদি Absolute পজিশনে থাকা এলিমেন্টের কোনো পূর্বসুরী না থকে তাহলে ইহা ডকুমেন্ট বডি( এক্ষেত্রে সৃষ্ট ফাঁকা অংশ পার্শ্ববর্তী অন্য এলিমেন্ট এসে পূরণ করে। বিঃদ্রঃ kt_satt_skill_example_id=795 উপরের উদাহরণে সিলেক্টর kt_satt_skill_example_id=796 উপরের উদাহরণে সিলেক্টর kt_satt_skill_example_id=797 একটি পজিশনে থাকা এলিমেন্টের উপর অন্য একটি এলিমেন্ট এসে সমাপতিত(overlap) হতে পারে। এতে আগের এলিমেন্টি উড়ে এসে জুড়ে বসা এলিমেন্টের নিচে চাপা পড়ে অদৃশ্য হয়ে যেতে পারে। এলিমেন্টসমূহের স্ট্যাক অর্ডার(stack order) নির্ধারণ করার জন্য সিএসএস একটি এলিমেন্টের ধনাত্মক(+) অথবা ঋনাত্মক(-) স্ট্যাক অর্ডার থাকতে পারেঃ kt_satt_skill_example_id=798 স্ট্যাক অর্ডারের ভ্যালু যত বেশী হবে সে এলিমেন্টটি তত বেশি সামনে থাকবে। পক্ষান্তরে স্ট্যাক অর্ডারের ভ্যালু যত কম হবে সে এলিমেন্টটি তত বেশি পেছনে থাকবে। বিঃদ্রঃ যদি দুইটি অবস্থানকৃত এলিমেন্ট নিচের উদাহরণে দেখানো হয়েছে, কিভাবে একটি ইমেজের উপর টেক্সটের পজিশন নির্ধারণ করা হয়। কিভাবে একটি ইমেজের উপর লেখা যায় তা নিচের উদাহরণে দেখানো হলোঃ kt_satt_skill_example_id=799 যখন কোন কনটেন্ট তার কন্টেন্ট বক্স থেকে উপচে পড়ে(overflow) তখন কনটেন্টকে ক্লিপ করার জন্য বা স্ক্রলবার যুক্ত করার জন্য অথবা শুধু কন্টেন্টকে প্রদর্শন করানোর জন্য সিএসএস বিঃদ্রঃ শুধুমাত্র নির্দিষ্ট উচ্চতা(height) সম্বলিত এলিমেন্টের ক্ষেত্রে kt_satt_skill_example_id=801 লে-আউট ভালো ভাবে নিয়ন্ত্রন করতে চাইলে আপনাকে overflow-কে ক্লিপ করে কনটেন্টের বাকি অংশকে অদৃর্শ করে দেয়। লে-আউট ভালো ভাবে নিয়ন্ত্রন করতে চাইলে আপনাকে ব্রাউজার সয়ংক্রিয়ভাবে overflow ক্লিপ করে এবং স্ক্রলবার তৈরি করে। লে-আউট ভালো ভাবে নিয়ন্ত্রন করতে চাইলে আপনাকে kt_satt_skill_example_id=805 কন্টেন্টের লেআউট সঠিকভাবে নিয়ন্ত্রণ করতে চাইলে overflow প্রোপার্টিটি ব্যবহার করুন। kt_satt_skill_example_id=806 কটি এলিমেন্ট ভাসমান(float) হবে কিনা, অর্থাৎ একটি এলিমেন্ট ডানে না বামে থাকবে তা নির্ধারণের জন্য সিএসএস ফ্লোটিং এলিমেন্টসমূহের আচরণ নিয়ন্ত্রণে রাখার জন্য নিচে দুটি বাটনের সাহায্যে float:left ব্যবহার করে বামদিকে নেওয়া হয়েছে float:right ব্যবহার করে ডানদিকে নেওয়া হয়েছে একটি এলিমেন্ট ভাসমান(float) হবে কিনা তা নির্ধারণ করে। একটি এলিমেন্টকে ফ্লোটিং এলিমেন্টের নিচে(বামে বা ডানে) থাকতে বাধ্য করে। কন্টেন্ট তার এলিমেন্ট বক্স থেকে উপচে পড়লে(overflow) কি ঘটে তা নির্ধারণ করে। একটি এলিমেন্ট যদি তার কন্টেন্ট বক্স থেকে ডানে বা বামে উপচে পড়ে(overflow হয়) তাহলে কি হবে তা নির্ধারণ করে। একটি এলিমেন্ট যদি তার কন্টেন্ট বক্স থেকে উপরে বা নিচে উপচে পড়ে(overflow হয়) তাহলে কি হবে তা নির্ধারণ করে। সাধারণত ইমেজের চারপাশকে টেক্সট দিয়ে মোড়ানোর জন্য নিচের উদাহরণে টেক্সটের বামপাশে এবং ডানপাশে ইমেজকে ফ্লোট করে দেখানো হলোঃ kt_satt_skill_example_id=825 ফ্লোটিং এলিমেন্টের আচরণ নিয়ন্ত্রনের জন্য সাধারণত একটি এলিমেন্টকে ফ্লোটিং এলিমেন্টের কোন পাশে ফ্লোট হওয়া থেকে বাধা দেবে তা নির্ধারণের জন্য kt_satt_skill_example_id=826 একটি এলিমেন্ট যদি তার কন্টেইনারের চেয়ে বড় এবং ফ্লোটিং হয় তাহলে ইহা এর কনটেইনার থেকে উপচে পড়বে।আরেকটি এলিমেন্ট আকারে বড় হয় তাহলে বড় অংশটি কন্টেইনারের বাহিরে ওভারফ্লো করবে। এই সমস্যা সমাধাণের জন্য আমরা এই অধ্যায়ের পূর্ববর্তী অধ্যায়ে overflow সম্পর্কে বিস্তারিত আলোচনা করা হয়েছে। kt_satt_skill_example_id=827 দীর্ঘ সময় ধরে যাইহোক Inline-block এলিমেন্ট ইনলাইন এলিমেন্ট এর মতই, কিন্তু inline-block এর ক্ষেত্রে নির্দিষ্ট প্রস্থ এবং উচ্চতা থাকতে পারে। kt_satt_skill_example_id=823 নিচের উদাহরণে লক্ষ্য করুন, ফ্লোটিং বক্সে kt_satt_skill_example_id=824 kt_satt_skill_example_id=828 বিঃদ্রঃ যেই এলিমেন্টের জন্য কোন একটি এলিমেন্টের অন্তর্গত টেক্সটকে মাঝে এলাইন করার জন্য kt_satt_skill_example_id=829 পরামর্শঃ টেক্সট এলাইন সম্পর্কে আরো জানতে আমাদের সিএসএস টেক্সট অধ্যায়টি দেখুন। kt_satt_skill_example_id=832 এলাইনের আরো একটি উপায় রয়েছে। kt_satt_skill_example_id=834 পরামর্শঃ যখন কোনো এলিমেন্টকে এলাইন করার জন্য এছাড়াও ইন্টারনেট এক্সপ্লোরার(৮) এবং এর পূর্বের ভার্সনের সাথে kt_satt_skill_example_id=837 উপরের উদাহরনের লক্ষ্য করুন, ইন্টারনেট এক্সপ্লোরার(৮) এবং এর পূর্বের ভার্সনে আমরা বিঃদ্রঃ যখন কোনো এলিমেন্টকে এলাইন করার জন্য এছাড়াও ইন্টারনেট এক্সপ্লোরার(৮) এবং এর পূর্বের ভার্সনের ক্ষেত্রে kt_satt_skill_example_id=839 সিএসএস সিলেক্টরের ক্ষেত্রে এক বা একাধিক এলিমেন্টকে একত্রে সিলেক্ট করা যায়। আমরা দুইটি এলিমেন্টে সিলেক্টরের মাঝে কম্বিনেটর ব্যবহার করতে পারি। সিএসএস(৩) এ চারটি ভিন্ন কম্বিনেটর রয়েছেঃ একটি এলিমেন্টের মধ্যে অবস্থিত সকল বংশধর বা ডিসেন্ডেন্ট এলিমেন্টকে সিলেক্ট করার জন্য ডিসেন্ডেন্ট সিলেক্টর ব্যবহার করা হয়। নিম্নের উদাহরণটিতে বংশধর(descendant) সিলেক্টর ব্যবহার করে kt_satt_skill_example_id=851 একটি এলিমেন্টের মধ্যে অবস্থিত সরাসরি চাইল্ড এলিমেন্ট গুলো সিলেক্ট করতে চাইল্ড সিলেক্টর ব্যবহার করা হয়। নিম্নের উদাহরণটিতে kt_satt_skill_example_id=853 একটি এলিমেন্টের পরবর্তী প্রথম সিবলিং এলিমেন্টকে সিলেক্ট করার জন্য সহোদর(adjacent sibling) সিলেক্টর ব্যবহার করা হয়। সিবলিং এলিমেন্ট গুলো অবশ্যই একই প্যারেন্ট এলিমেন্টের অর্ন্তভূক্ত হতে হবে এবং adjacent sibling - এর ক্ষেত্রে এটি শুধুমাত্র এর পরবর্তী এলিমেন্টটিকে সিলেক্ট করবে। নিম্নের উদাহরণটিতে শুধুমাত্র kt_satt_skill_example_id=855 একটি এলিমেন্টের পরবর্তী সকল সহোদর এলিমেন্টকে সিলেক্ট করার জন্য জেনারেল সিবলিং সিলেক্টর ব্যবহার করা হয়। নিম্নের উদাহরণটিতে একটি এলিমেন্টের বিশেষ অবস্থাকে সিলেক্ট করার জন্য সুডো ক্লাস ব্যবহার করা হয়। সুডো ক্লাস ব্যবহার করার জন্য আপনাকে কোনো অতিরিক্ত জাভাস্ক্রিপ্ট অথবা অন্য কোনো স্ত্রিপ্ট ব্যবহার করতে হবে না। উদাহরণস্বরূপ, আপনি কোনো এলিমেন্টের হোবারকে সিলেক্ট করতে চাইলে সুডো-ক্লাস উদাহরণ হিসেবে আমরা নিচের অংশটুকু দেখতে পারিঃ নিচের ধূসর রংয়ের বক্সের মধ্যে মাউস নিয়ে আসুন। অবাক হয়েছেন!! মাউস আনার সাথে সাথেই বক্সের রং পরিবর্তন হয়ে গেছে। মাউস আনুন, পরিবর্তন দেখুন। সুডো-ক্লাস এর গঠন প্রণালীঃ একটি লিংককে আমরা বিভিন্ন পর্যায়ে বিভিন্ন ভাবে প্রদর্শন করতে পারিঃ kt_satt_skill_example_id=866 উপরের উদাহরণটিতে লিংকের বিভিন্ন অবস্থাকে সুডো-ক্লাসের মাধ্যমে সিলেক্ট করে স্টাইল করা হয়েছে। এখানে আমরা সিএসএস ক্লাসের সাথে সুডো-ক্লাস গুলোকে একত্রে ব্যবহার করতে পারি। নিম্নের উদাহরণটিতে আমরা দেখবো একটি লিংকে কিভাবে হোভার যুক্ত করতে হয়ঃ kt_satt_skill_example_id=867 নিম্নের উদাহরণটিতে আমরা দেখবো কিভাবে kt_satt_skill_example_id=868 নিম্নের উদাহরণে kt_satt_skill_example_id=869 প্যারেন্ট এলিমেন্টের প্রথম চাইল্ডকে সিলেক্ট করতে আমরা নিম্নের উদাহরণটিতে প্যারেন্ট এলিমেন্টের প্রথম চাইল্ড যদি kt_satt_skill_example_id=871 নিম্নের উদাহরণে kt_satt_skill_example_id=872 নিম্নের উদাহরণটিতে প্রথম চাইল্ড এলিমেন্ট kt_satt_skill_example_id=880 সিএসএস সুডো-এলিমেন্ট দ্বারা একটি এলিমেন্টের নির্দিষ্ট অংশকে সিলেক্ট করে স্টাইল করা হয়। উদাহরণস্বরুপঃ সিএসএস(১) এবং সিএসএস(২)-এ সুডো-এলিমেন্ট এবং সুডো-ক্লাসে একটি কোলন ব্যবহার হতো। সিএসএস(৩)-এ সুডো-এলিমেন্টে একটি কোলন ব্যবহারের পরিবর্তে দুইটি কোলন ব্যবহারের প্রচলন করে। সুডো-এলিমেন্ট এবং সুডো-ক্লাসের গঠণপ্রণালীর মধ্যে পার্থক্য তৈরি করার জন্য ইহা প্রচলন করা হয়েছিল। kt_satt_skill_example_id=905 একটি টেক্সটের প্রথম অক্ষরকে সিলেক্ট করার জন্য kt_satt_skill_example_id=908 সুডো-এলিমেন্টগুলো সিএসএস ক্লাসের সাথেও ব্যবহার করা যায়ঃ kt_satt_skill_example_id=910 আপনি চাইলে একই এলিমেন্টে একাধিক সুডো এলিমেন্ট ব্যবহার করতে পারেন। kt_satt_skill_example_id=913 একটি এলিমেন্টের আগে কন্টেন্ট যোগ করার জন্য kt_satt_skill_example_id=916 একটি এলিমেন্টের পরে কন্টেন্ট যোগ করার জন্য kt_satt_skill_example_id=918 ব্যবহারকারী একটি এলিমেন্টের কোন অংশকে সিলেক্ট করলে, সিলেক্টকৃত অংশকে স্টাইল করার জন্য kt_satt_skill_example_id=920 সিএসএস-এ কোনো এলিমেন্টকে উজ্জ্বল বা অনুজ্জ্বল অথবা সচ্ছ বা অসচ্ছ করতে কোনো ইমেজকে সচ্ছ বা অসচ্ছ করতে আমরা opacity 0.3 opacity 0.5 opacity 1 kt_satt_skill_example_id=939 এখন আমরা kt_satt_skill_example_id=942 এই ইমেজ গুলোতে হোভার করলে ইমেজ গুলো অসচ্ছ দেখাবে। এই উদাহরণটি আগের উদাহরনের ঠিক বিপরীত করেঃ kt_satt_skill_example_id=944 আপনি যদি একটি এলিমেন্টের ব্যাকগ্রাউন্ড কালারকে ট্রান্সপারেন্ট করতে চান, সেক্ষেত্রে আপনি RGBA ব্যবহার করতে পারেন। RGBA কালার ভ্যালু হচ্ছে RGB কালারের প্রসারিত অংশ যার সাথে alpha channel থাকে, যা কালারের opacity নির্দেশ করে। নিচের উদাহরনে শুধু ব্যাকগ্রাউন্ড কালারকে ট্রান্সপারেন্ট করা হয়েছে কিন্তু টেক্সট গুলোতে করা হয়নিঃ 100% opacity 60% opacity 30% opacity 10% opacity টিপসঃ RGBA কালার সম্পর্কে বিস্তারিত জানতে আমাদের সিএসএস কালার অধ্যায়টি দেখুন। kt_satt_skill_example_id=951 তারুণ্যই সফলতা, তারুণ্যই স্যাট। তারুণ্যেই গড়বে ডিজিটাল বাংলাদেশ। kt_satt_skill_example_id=954 নেভিগেশনবার হচ্ছে কিছু লিংকের লিস্ট। একটি নেভিগেশনবার যেহেতু কিছু লিঙ্কের লিস্ট, তাই আমরা এই লিস্ট তৈরি করার জন্য kt_satt_skill_example_id=1211 কিছু স্টাইল যোগ করুনঃ kt_satt_skill_example_id=1218 উদাহরণের বর্ণনাঃ উপরের কোডটি হরিজন্টাল ও ভার্টিকাল দুই ধরনের নেভিগেশন বারের জন্য মানসম্মত কোড। ভার্টিকাল নেভিগেশনবার তৈরির জন্য আপনি লিস্টের kt_satt_skill_example_id=1224 উদাহরণের বর্ণনাঃ উপরের কোডের পরিবর্তে আপনি নিচের মত করেও লিখতে পারেনঃ kt_satt_skill_example_id=1225 একটি সাধারণ নেভিগেশনবারের উদাহরণঃ kt_satt_skill_example_id=1226 ইউজারকে বুঝানোর জন্য একটি "active" ক্লাস যোগ করে দিনঃ kt_satt_skill_example_id=1227 লিংককে মাঝে আনতে নেভিগেশনবারের চারপাশে বর্ডার দিতে একটি সম্পূর্ণ দৈর্ঘ্যের ফিক্সড ভার্টিকাল নেভিগেশনবার তৈরি করিঃ kt_satt_skill_example_id=1232 দ্রষ্টব্যঃ মোবাইলে এই উদাহরণটি ঠিকভাবে নাও দেখাতে পারে। হরিজন্টাল নেভিগেশনবার তৈরির ২টি পদ্ধতি আছে। inline, float লিস্ট স্টাইল ব্যবহার করে। kt_satt_skill_example_id=1234 উদাহরণের বর্ণনাঃ kt_satt_skill_example_id=1237 উদাহরণের বর্ণনাঃ একটি সাধারণ হরিজন্টাল নেভিগেশনবার তৈরি করে দেখানো হলোঃ kt_satt_skill_example_id=1243 ইউজারকে বুঝানোর জন্য একটি "active" ক্লাস যোগ করে দিনঃ kt_satt_skill_example_id=1248 লিস্ট আইটেমে kt_satt_skill_example_id=1250 kt_satt_skill_example_id=1252 ইউজার যদি পেজকে স্ক্রল করে তবুও নেভিগেশন বার পেজের উপরে অথবা নিচে ফিক্সড থাকবেঃ kt_satt_skill_example_id=1258 kt_satt_skill_example_id=1261 বিঃদ্রঃ মোবাইলে এই উদাহরণটি ঠিকভাবে নাও দেখাতে পারে। হালকা ধূসর বর্ডারসহ একটি ধূসর হরিজন্টাল নেভিগেশন বারের উদাহরণঃ kt_satt_skill_example_id=1264 মাউস আনুন ! ড্রপডাউন ইমেজ ড্রপডাউনঃ একটি বেসিক ড্রপডাউন তৈরি করিঃ kt_satt_skill_example_id=1176 এইচটিএমএলঃ ড্রপডাউন কন্টেন্ট রাখার জন্য কন্টেইনার হিসেবে একটি সিএসএসঃ ড্রপডাউন আইটেমকে একটি কার্ডের মত দেখানোর জন্য আমরা সিএসএস(৩) এর এই উদাহরণটি আগের উদাহরণের মতই, শুধু ড্রপডাউন কন্টেন্টে লিঙ্ক যোগ করা হয়েছেঃ kt_satt_skill_example_id=1180 আপনি যদি ড্রপডাউন কন্টেন্টকে ড্রপডাউন বাটনের ডান থেকে শুরু করতে চান তাহলে kt_satt_skill_example_id=1186 কোন এলিমেন্টের টেক্সটের উপর ইউজার মাউস পয়েন্টার নিয়ে গেলে টেক্সট সম্পর্কে অতিরিক্ত কোন তথ্য দেখানোকে টুলটিপ বলে। যেমনঃ উপরে টুলটিপ টেক্সট ডানে টুলটিপ টেক্সট নিচে টুলটিপ টেক্সট বামে টুলটিপ টেক্সট একটি টুলটিপ তৈরি করার পদ্ধতিঃ kt_satt_skill_example_id=1144 এইচটিএমএলঃ সিএসএসঃ এই উদাহরণে, আমরা টুলটিপ টেক্সটকে ডান পাশে দেখানোর জন্য আপনি যদি টুলটিপ টেক্সটের প্যাডিংয়ের ভ্যালু বাড়ান অথবা কমান তাহলে, kt_satt_skill_example_id=1145 যদি আপনি টুলটিপকে উপরে দেখাতে চান তাহলে আপনি যদি টুলটিপ টেক্সটের প্রস্থ ১০০ পিক্সেল সেট করেন তাহলে মার্জিন সেট করতে হবে -৫০ পিক্সেল। kt_satt_skill_example_id=1147 টুলটিপ টেক্সটকে নিচেরদিকে দেখাতে চাইলে আপনাকে kt_satt_skill_example_id=1149 আমরা অ্যাঁরোকে নিচেরদিকে রাখার জন্য লক্ষণীয় বিষয় হচ্ছে উভয় প্রোপার্টির মান সমানভাবে দিতে হবে, ১০পিক্সেল বর্ডার দিলে মার্জিনও -১০পিক্সেল ব্যবহার করতে হবে। kt_satt_skill_example_id=1150 উপরের দিকে অ্যাঁরো দেখানোর জন্য kt_satt_skill_example_id=1153 বামদিকে অ্যাঁরো দেখানোর জন্য kt_satt_skill_example_id=1156 বামদিকে অ্যাঁরো দেখানোর জন্য kt_satt_skill_example_id=1161 টুলটিপ টেক্সটে এনিমেশন যোগ করার পদ্ধতি হচ্ছে kt_satt_skill_example_id=1163 আপনি সিএসএস ব্যবহার করে খুব সহজেই চমৎকার ইমেজ গ্যালারি তৈরি করতে পারেন। এখানে ইমেজের বর্ণনা লিখুন এখানে ইমেজের বর্ণনা লিখুন এখানে ইমেজের বর্ণনা লিখুন নিম্নের ইমেজ গ্যালারিটি সিএসএস দিয়ে তৈরি করা হয়েছেঃ kt_satt_skill_example_id=1111 kt_satt_skill_example_id=1115 ইমেজ স্প্রাইট(Sprite) হলো একটি ছবির মধ্যে একগুচ্ছ ছবি সংগ্রহ করে রাখা। অসংখ্য ছবি যুক্ত একটি ওয়েবপেজ লোড হতে অনেক সময় নিতে পারে এবং অসংখ্য সার্ভার রিকুয়েস্ট তৈরি করতে পারে। ইমেজ স্প্রাইটের (Sprite) ব্যবহার সার্ভার রিকুয়েস্টের সংখ্যা কমিয়ে আনে এবং ব্যান্ডউইথ বাচিয়ে দেয়। তিনটি আলাদা ছবি ব্যবহার করার চেয়ে আমরা একটি ছবিতে তিনটি ছবি ব্যবহার করতে পারঃ("icon.gif") সিএসএস এর সাহায্যে আমরা একটি ছবির যতটুকু প্রদর্শন করে দেখানোর দরকার ততটুকুই দেখাতে পারি। নিচের উদাহরণে, "icon.gif" ইমেজের কোন অংশটুকু প্রদর্শিত হবে তা সিএসএস দিয়ে নির্ধারণ করে দেয়া হয়েছেঃ kt_satt_skill_example_id=1092 উদাহরণের ব্যাখ্যা ইমেজ স্প্রাইট(Sprite) ব্যবহারের এটাই সবচেয়ে সহজ উপায়। নিচে আমরা স্প্রাইট ইমেজে লিঙ্ক ও হোভার ইফেক্টের ব্যবহার দেখাবোঃ নেভিগেশন লিস্ট তৈরির জন্য আমরা "icon.gif" স্প্রাইট(Sprite) ইমেজটি ব্যবহার করবো। আমরা এখানে এইচটিএমএল লিস্ট ব্যবহার করবো, কারণ ইহা একই সাথে লিংক ও ব্যাকগ্রাউন্ড ইমেজ সাপোর্ট করে kt_satt_skill_example_id=1093 উদাহরণের ব্যাখ্যা তারপরে ইমেজের প্রত্যেক অংশের জন্য অবস্থান এবং স্টাইল সেট করা হয়েছেঃ এখন আমরা নেভিগেশন লিস্টে হোভার ইফেক্ট যোগ করবো। টিপসঃ আমাদের নতুন ইমেজটিতে ("iconbg.gif")নেভিগেশনের জন্য তিনটি ইমেজ রয়েছে এবং তিনটি ইমেজ রয়েছে হোভার ইফেক্টের জন্য। ইহা একটি সিংগেল ইমেজ অর্থাৎ ছয়টি আলাদা ইমেজ না হওয়ায় ব্যবহারকারী যখন ইমেজের উপর হোভার করবে তখন লোডিংয়ের জন্য সময় নষ্ট হবে না, হোভার ইফেক্ট যুক্ত করার জন্য আমরা শুধুমাত্র তিন লাইনের কোড যোগ করেছিঃ kt_satt_skill_example_id=1094 উদাহরণের ব্যাখ্যাঃ কোন একটি নির্দিষ্ট এট্রিবিউট অথবা এট্রিবিউটের ভ্যালুকে সিলেক্টের মাধ্যমে এইচটিএমএল এলিমেন্টকে স্টাইল করা সম্ভব। নিচের উদাহরণে target এট্রিবিউট যুক্ত সকল এলিমেন্ট সিলেক্ট করা হয়েছে। linkcode টার্গেট এট্রিবিউট দ্বারা লিংকটির ব্রেকগ্রাউন্ড কালার পরিবর্তন করা হয়েছে। kt_satt_skill_example_id=1070 নিচের উদাহরণে target="_blank" এট্রিবিউট যুক্ত সকল < a> এলিমেন্টকে সিলেক্ট করা হয়েছেঃ kt_satt_skill_example_id=1073 নিচের উদাহরণে, title এট্রিবিউটের ভ্যালুর মধ্যে একটি সতন্ত্র শব্দ "satt" যুক্ত সকল এলিমেন্টকে সিলেক্ট করা হয়েছেঃ kt_satt_skill_example_id=1075 উপরের উদাহরণে title=" chandpur satt", এবং title="satt logo" যুক্ত এলিমেন্টগুলোর সাথে ম্যাচ(match ) করবে। কিন্তু title="our-satt" অথবা title="satts" যুক্ত এলিমেন্টের সাথে ম্যাচ করবে না। নিচের উদাহরণে class এট্রিবিউটের "satt" শব্দ দিয়ে শুরু হওয়া ভ্যালু যুক্ত সকল এলিমেন্টকে সিলেক্ট করা হয়েছেঃ নোটঃ ভ্যালু অবশ্যই একটি পুরো শব্দ হতে হবে। যেমনঃ-class="satt",class="satt_info",class="satt-name" অথবা class="sattservicee"! kt_satt_skill_example_id=1076 নিচের উদাহরণে ঐ সকল এলিমেন্টকে সিলেক্ট করবে যাদের এট্রিবিউটের ভ্যালু "satt" দিয়ে শুরু হয়েছে। নোট: ভ্যালুটি সম্পূর্ণ শব্দ না হলেও চলবে। যেমন: class="satt", অথবা হাইফেন ( - ) দ্বারাও ব্যবহার করা যেতে পারে। যেমনঃ class="satt-name"! ,class="satt_info"! kt_satt_skill_example_id=1077 নিচের উদাহরণে ঐ সকল এলিমেন্টকে সিলেক্ট করবে যাদের এট্রিবিউট class এবং যার ভ্যালু "satt" দিয়ে শেষ হয়েছে। নোট: ভ্যালুটি সম্পূর্ণ শব্দ না হলেও চলবে। যেমন: class="satt", অথবা হাইফেন ( - ) দ্বারাও ব্যবহার করা যেতে পারে। যেমনঃ class="satt-name"! ,class="satt_info"! kt_satt_skill_example_id=1079 নিচের উদাহরণে ঐ সকল এলিমেন্টকে সিলেক্ট করে যার class এট্রিবিউটের ভ্যালু "sa" বর্ণগুলো বহন করেঃ নোটঃ ভ্যালুটি সম্পূর্ণ শব্দ না হলেও চলবে। kt_satt_skill_example_id=1080 class বা ID ছাড়াও এট্রিবিউট সিলেক্টরের মাধ্যমে ফরম স্টাইল করা সহজ। kt_satt_skill_example_id=1083 বিঃ দ্র: ইন্টারনেট এক্সপ্লোরের[এট্রিবিউট] দ্রুত কাজ করানোর জন্য DOCTYPE অবশ্যই ডিক্লেয়ার করতে হবে টিপস: ফর্ম স্টাইল সম্মন্ধে আরো জানতে আমাদের সিএসএস ফরম অধ্যায় ভিজিট করুন। সিএসএস সিলেক্টরের সম্পূর্ণ রেফারেন্সের জন্য আমাদের সিএসএস সিলেক্টর অধ্যায়টি পড়ূন। সিএসএস এর মাধ্যমে একটি এইচটিএমএল ফর্মকে অসাধারণ ভাবে সাজানো যায়ঃ নিচে যে সুন্দর একটি এইচটিএমএল ফর্মটি দেখতে পাচ্ছেন তা সিএসএস দিয়ে স্টাইল করা হয়েছে। ইনপুট ফিল্ড এর প্রস্থ নির্ধারণের জন্য kt_satt_skill_example_id=1005 উপরের উদাহরণটি সব ধরনের টেক্সট ফিল্ড এর ভেতরের চারপাশে ফাকা জায়গা যুক্ত করার জন্য টিপসঃ একাধিক input ফিল্ডের ক্ষেত্রে আপনি যদি ফিল্ডের চারপাশে কিছু kt_satt_skill_example_id=1007 উপরের উদাহরণে লক্ষ্য করলে দেখবেন বর্ডারের আকার এবং কালার পরিবর্তন করার জন্য সিএসএস kt_satt_skill_example_id=1010 আপনি যদি শধুমাত্র ইনপুট ফিল্ডের নিচের বর্ডার পরিবর্তন করতে চান তাহলে kt_satt_skill_example_id=1035 ইনপুট ফিল্ডে ব্যাকগ্রাউন্ড কালার যুক্ত করার জন্য kt_satt_skill_example_id=1036 যখন ইনপুট ফিল্ডে ক্লিক করা হয় বা ইনপুট ফিল্ড ফোকাস হয়, তখন কিছু কিছু ব্রাউজার ডিফল্টভাবে এর চারপাশে নীল আউটলাইন যুক্ত করে। আপনি চাইলে ফোকাস অবস্থায় কোন কিছু সেট করার জন্য kt_satt_skill_example_id=1037 kt_satt_skill_example_id=1038 ইনপুট ফিল্ডের মধ্যে আইকন/ইমেজ যুক্ত করার জন্য নিচের উদাহরণে লক্ষ্য করলে দেখবেন আইকনের বামপাশে যথার্থ স্পেস রাখার জন্য উপরোক্ত প্রোপার্টি ছাড়াও আমরা kt_satt_skill_example_id=1041 ফোকাস হওয়া অবস্থায় সার্চ ইনপুটকে এনিমেট করার জন্য এই উদাহরণে আমরা সিএসএস(৩) kt_satt_skill_example_id=1042 টিপসঃ টেক্সট এরিয়ার সাইজ নিজের মত করে নির্ধারণ করার জন্য kt_satt_skill_example_id=1048 kt_satt_skill_example_id=1050 kt_satt_skill_example_id=1053 সিএসএস এর মাধ্যমে বাটন স্টাইল সম্পর্কে আর ভালভাবে জানতে, আমাদের সিএসএস বাটন টিউটোরিয়াল অধ্যায় ভিজিট করুন। সিএসএস কাউন্টার(counter) হলো সিএসএস কর্তৃক নিয়ন্ত্রিত ভ্যারিয়েবল। কোনো এলিমেন্ট একটি পেজের মধ্যে কতবার ব্যবহৃত হয়েছে তার উপর ভিত্তিকরে সিএসএস নিয়মের আওতায় কাউন্টার ভ্যারিয়েবলের ভ্যালুসমূহ বৃদ্ধি পায়। ডকুমেন্টের কন্টেন্টের উপর ভিত্তিকরে কাউন্টারসমূহকে মানানসই অবস্থানে রাখতে পারবেন। জেনারেটেড কন্টেন্ট ইনসার্ট(insert) করার জন্য ::before এবং ::after সুডো-এলিমেন্টের সাথে ব্যবহার করা হয়। কাউন্টারের ভ্যালু এক বা তার অধিক বৃদ্ধি পায়। এক বা তার অধিক কাউন্টার তৈরি বা রিসেট হয়। সিএসএস কাউন্টার নিয়ে কাজ করার জন্য, আমরা আবারো সিএসএস কাউন্টার প্রোপার্টি এবং ফাংশনের কার্যাবলী নিম্নে সংক্ষেপে তুলে ধরলাম। সিএসএস কাউন্টার ব্যবহার করতে হলে প্রথমে অবশ্যই নিচের উদাহরণে তারপরে kt_satt_skill_example_id=981 নিচের উদাহরণে kt_satt_skill_example_id=982 আউটলাইন লিস্ট তৈরির জন্য কাউন্টার যথাপোযুক্ত। কারণ কাউন্টারের নতুন ভ্যালু স্বয়ংক্রিয়ভাবে চাইল্ড এলিমেন্টসমূহে যুক্ত হয়। নেস্টেড কাউন্টারের বিভিন্ন লেভেলের মধ্যে একটি স্ট্রিং যুক্ত করার জন্য kt_satt_skill_example_id=984 ,
এবং তিনটি এলিমেন্টের জন্য পৃথকভাবে বর্ডার সেট করা হয়েছে। টেবিলের বর্ডার কলাপ্স
border-collapse প্রোপার্টিটি ব্যবহার করা হয়।border-collapse প্রোপার্টি ব্যবহার করায় দুটি বর্ডার একত্রিত হয়ে একটি বর্ডারে পরিনত হয়েছে।টেবিলের টেক্সট এলাইনমেন্ট সেট
< th> এবং < td> এলিমেন্টের কন্টেন্টসমূহ অনুভূমিকভাবে সেন্টারে, বামে নাকি ডানে দেখাবে তা সেট করার জন্য সিএসএস text-align প্রোপার্টি ব্যবহার করা হয়।< th> এলিমেন্টেের কন্টেন্টসমূহ সেন্টারে থাকে এবং < td> এলিমেন্টের কন্টেন্টসমূহ বামে থাকে।< th> এলিমেন্টের কন্টেন্টসমূহের এলাইনমেন্ট left নির্ধারণ করা হয়েছে।< th> এবং < td> এলিমেন্টের কন্টেন্টকে ভার্টিক্যাললি এ্যালাইন করার জন্য vertical-align প্রোপার্টিটি ব্যবহার করুন। এর সম্ভাব্য ভ্যালুগুলো হলোঃ top এবং bottom।টেবিলের প্রস্থ এবং উচ্চতা সেট
width এবং height প্রোপার্টি ব্যাবহার করা হয়।< table> এর প্রস্থ সেট করা হয়েছে 100% এবং < th> এলিমেন্টের height সেট করা হয়েছে 50px।টেবিলে প্যাডিং যুক্তকরণ
< th> এবং < td> এলিমেন্টে padding প্রোপার্টি ব্যবহার করা হয়।kt_satt_skill_example_id=711
সারিকে অনুভূমিকভাবে বিভাজন
< th> এবং < td> এলিমেন্টে border-bottom প্রোপার্টি যুক্ত করা হয়।টেবিলের সারিতে পৃথকভাবে কালার সেট
< th> এলিমেন্টের ব্যাকগ্রাউন্ড কালার এবং টেক্সট কালার নির্ধারণ করা হয়েছেঃ
টেবিলে জেব্রা স্টাইল যুক্তকরণnth-child() সিলেক্টর ব্যবহার করে টেবিলের জোড় অথবা বিজোড় সারিতে background-color প্রোপার্টি যুক্ত করতে হবে।টেবিলে হোভার ইফেক্ট যুক্তকরণ
< tr> এলিমেন্টে :hover সিলেক্টর ব্যবহার করে সিএসএস প্রয়োগ করুন।রেসপন্সিভ টেবিল তৈরি করা
এলিমেন্টকে
overflow-x: auto প্রোপার্টি ব্যবহার করুন।display প্রোপার্টি।
এক নজরে সিএসএস display এবং visibility প্রোপার্টি
display প্রোপার্টির ব্যবহার
display প্রোপার্টির মাধ্যমে নির্ধারণ করা হয়।inline অথবা block।এইচটিএমএল ইনলাইন এলিমেন্ট
এলিমেন্ট রয়েছে।এইচটিএমএল ব্লক-লেভেল এলিমেন্ট
-
এলিমেন্টের ডিফল্ট display ভ্যালু পরিবর্তনinline অথবা block। আপনি সিএসএস display প্রোপার্টি ব্যবহার করে এই ভ্যালু পরিবর্তন করতে পারেন।< li> এলিমেন্টকে আমরা প্রায়ই ইনলাইন এলিমেন্টে রূপান্তরিত করি।display প্রোপার্টি ব্যবহার করা হয়। এলিমেন্টের ধরণ পরিবর্তন করার জন্য display প্রোপার্টি ব্যবহার করা হয় না। সুতরাং প্রোপার্টি-ভ্যালু display: block; সম্বলিত কোনো এইচটিএমএল এলিমেন্টের মধ্যে একই লাইনে অন্য কোনো এলিমেন্ট অবস্থান নিতে পারে না।
নিচের উদাহরণে < span> এলিমেন্টকে ব্লক এলিমেন্ট হিসাবে প্রদর্শন করানো হলোঃ< a> এলিমেন্টকে ব্লক এলিমেন্ট হিসাবে প্রদর্শন করানো হলোেঃdisplay: none; এর ব্যবহারdisplay: none; প্রোপার্টি ব্যবহার করা হয়।< script> এলিমেন্টে ডিফল্টভাবে display: none; ব্যবহৃত হয়।এলিমেন্টকে সুপ্ত অবস্থায় রাখা
display: none; অথবা visibility:hidden ব্যবহার করতে হয়।display: none; ব্যবহার করলে এইচটিএমএল পেজ এমনভাবে প্রদর্শিত হবে মনে হবে সুপ্ত এলিমেন্টটি এই পেজে নেই।width, max-width এবং margin: auto এর ব্যবহারwidth সেট করে দিলে এর কন্টেইনারের শেষ প্রান্ত পর্যন্ত প্রস্থ দখল করতে পারে না।margin প্রোপার্টির ভ্যালু auto সেট করতে হবে।width প্রোপার্টির ভ্যালু সেট করা হয়েছে 600px এবং margin প্রোপার্টির ভ্যালু সেট করা হয়েছে auto।
max-width প্রোপার্টি ব্যবহার করা হয়।
এই max-width প্রোপার্টির ভ্যালু সেট করা হয়েছে 600px এবং margin প্রোপার্টির ভ্যালু সেট করা হয়েছে auto।
position প্রোপার্টি ব্যবহার করা হয়।position প্রোপার্টি ব্যবহার করা হয়।positionপ্রোপার্টির কীওয়ার্ড(keyword) ভ্যালুসমূহঃposition: static;position: relative;position: fixed;position: absolute;position: sticky;position প্রোপার্টির গ্লোবাল(global) ভ্যালুসমূহঃposition: inherit;position: initial;position: unset;
top, bottom, left এবং right প্রোপার্টি ব্যবহার করা হয়।position প্রোপার্টি না সেট করে দেন তাহলে এই প্রোপার্টিসমূহ ঠিকমত কাজ করবে না। কারণ, এই প্রোপার্টিগুলো position প্রোপার্টির ভ্যালুর উপরে নির্ভরশীল।
এক নজরে সিএসএস পজিশন প্রোপার্টিসমূহposition:static;top, right, bottom এবং left প্রোপার্টির ভ্যালুসমূহের কোনো প্রভাব থাকে না।position: static; প্রোপার্টি সংশ্লিষ্ট এলিমেন্ট বিশেষ কোনো পদ্ধতিতে তার নিজের পজিশন পরিবর্তন করতে পারে না। এটি সব সময় পেজের স্বাভাবিক ধারা অনুযায়ী পজিশন পেয়ে থাকে।#two-তে position: static; ব্যবহার করায় ইহা পেজের স্বাভাবিক ধারা অনুযায়ী পজিশন পেয়েছে।position:relative;position: relative; প্রোপার্টি সংশ্লিষ্ট এলিমেন্ট তার নিজের সাপেক্ষে পজিশন পরিবর্তন করতে পারে।position: relative; প্রোপার্টি সংশ্লিষ্ট এলিমেন্টের স্বাভাবিক অবস্থানের পরিবর্তন ঘটানোর জন্য top, right, bottom অথবা left প্রোপার্টি ব্যবহার করা হয়।#two-তে position: relative; ব্যবহার করায় এর নিজের সাপেক্ষে অবস্থানের পরিবর্তন ঘটেছে।position:absolute;position: absolute; যুক্ত একটি এলিমেন্ট তার নিকটবর্তী পূর্বসুরী(ancestor) এলিমেন্টের অবস্থানের সাপেক্ষে নিজের অবস্থানের পরিবর্তন ঘটাতে পারে।body) কে পূর্বসুরী ধরে নিজের অবস্থানের পরিবর্তন ঘটাতে পারে এবং পেজ স্ক্রলিং এর সাথে সাথে নড়া চড়া করে।static পজিশন ব্যতীত সবগুলো এলিমেন্টই নিজের অবস্থানের পরিবর্তন ঘটাতে পারে।#two-তে position: absolute; ব্যবহার করায় পূর্বসুরী(ancestor) এলিমেন্টের সাপেক্ষে নিজের অবস্থানের পরিবর্তন ঘটিয়েছে।position:fixed;position: fixed; যুক্ত একটি এলিমেন্ট viewport এর সাপেক্ষে নিজের পজিশনের পরিবর্তন ঘটাতে পার। অর্থ্যাৎ পেজ স্ক্রল করলেও ইহা নিজের অবস্থান থেকে এক বিন্দুও নড়ে না।#three-তে position: fixed; ব্যবহার করায় এটি viewport এর সাপেক্ষে পজিশন ফিক্সড রয়েছে।position: sticky;position: sticky; যুক্ত এলিমেন্ট ইউজারের পেজ স্ক্রলের সাপেক্ষে নিজের অবস্থানের পরিবর্তন ঘটাতে পারে। স্ক্রল পজিশনের উপর ভিত্তি করে এটি Relative এবং Fixed অবস্থানের মধ্যে টোগল করে।z-index এর ব্যবহারz-index প্রোপার্টি ব্যবহার করা হয়।z-index ছাড়া সমাপতিত (overlap) হয় তখন এলিমেন্টের শেষ অবস্থানের এইচটিএমএল কোড উপরে দেখাবে।একটি ইমেজে টেক্সটের পজিশন
ছবিতে লেখা
সিএসএস overflow
overflow প্রোপার্টি ব্যবহার করা হয়।overflow প্রোপার্টিতে নিম্নোক্ত ভ্যালুসমূহ ব্যবহৃত হয়।overflow প্রোপার্টির কী-ওয়ার্ড ভ্যালুসমূহoverflow: visible; - ডিফল্ট ভ্যালু। এখানে overflow ক্লিপ হয় না এবং কন্টেন্ট বক্সের বাইরে প্লাবিত হয়।overflow: hidden;- overflow ক্লিপ হয় এবং কনটেন্টের বাকি অংশ অদৃশ্য হয়ে যায়।overflow: scroll; - overflow ক্লিপ হয় এবং স্ক্রলবার যুক্ত হয়, যা দ্বারা স্ক্রল করে কনটেন্টের বাকি অংশ দেখা যায়।overflow: auto;- ব্রাউজার সয়ংক্রিয়ভাবে overflow ক্লিপ করে এবং স্ক্রলবার তৈরি করে।
overflow প্রোপার্টির গ্লোবাল ভ্যালুসমূহঃoverflow: inherit;overflow: initial;overflow: unset;overflow প্রোপার্টিটি প্রযোজ্য।ফরমাল সিনট্যাক্স
overflow: visible | hidden | scroll | auto;overflow: visible;overflow প্রোপার্টির ডিফল্ট ভ্যালু হলো visible বা দৃর্শমান। অর্থাৎ overflow ক্লিপ হয় না এবং কন্টেন্ট বক্সের বাইরে প্লাবিত অবস্থায় দৃশ্যমান থাকে।p {
overflow: visible; /* কন্টেন্ট ক্লিপ হয় না */
}overflow প্রোপার্টি ব্যবহার করতে হবে। একটি এলিমেন্ট এর ভেতরে কন্টেন্ট গুলো কিভাবে থাকবে overflow প্রোপার্টি দ্বারা তা নির্দেশ করা হয়।
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছেoverflow: hidden;p {
overflow: hidden; /* কোনো স্ক্রলবার তৈরি হয় না। */
}overflow: scroll;scroll যুক্ত করলে overflow ক্লিপ হয় এবং স্ক্রলবার সরবরাহ করে।p {
overflow: scroll; /* সবসময়ই স্ক্রলবার তৈরি হয়। */
}overflow প্রোপার্টি ব্যবহার করতে হবে। একটি এলিমেন্ট এর ভেতরে কন্টেন্ট গুলো কিভাবে থাকবে overflow প্রোপার্টি দ্বারা তা নির্দেশ করা হয়।
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছেoverflow: auto;p {
overflow: auto; /* প্রয়োজন অনুযায়ী ব্রাউজার স্ক্রলবার তৈরি হয়। */
}overflow প্রোপার্টি ব্যবহার করতে হবে। একটি এলিমেন্ট এর ভেতরে কন্টেন্ট গুলো কিভাবে থাকবে overflow প্রোপার্টি দ্বারা তা নির্দেশ করা হয়।
overflow বুজার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুজার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুজার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুজার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছেসবগুলোর প্রোপার্টির ব্যবহারঃ
overflow-X এবং overflow-Yoverflow-X এবং overflow-Y প্রোপার্টি overflow কনটেন্টকে অনুভূমিক/উলম্ব অথবা উভয় ভাবে পরিবর্তন করে।overflow-X দ্বারা কনটেন্টের বাম অথবা ডান প্রান্তে কি হবে তা নির্ধারণ করে।overflow-Y দ্বারা কনটেন্টের উপর বা নিচ প্রান্তে কি হবে তা নির্ধারণ করে।float প্রোপার্টি ব্যবহার করা হয়।clear প্রোপার্টি ব্যবহার করা হয়।float এবং clear প্রোপার্টির ব্যবহার দেখানো হলোঃ
এক নজরে সিএসএসে ব্যবহৃত float প্রোপার্টিসমূহ
float প্রোপার্টির ব্যবহারfloat প্রোপার্টি ব্যবহার করা হয়।clear প্রোপার্টির ব্যবহার
clear প্রোপার্টি ব্যবহার করা হয়।float এর কার্যকারিতা এর পরবর্তী এলিমেন্ট গুলো এর উপরে চলে আসে। তাই এটাকে এড়িয়ে যাওয়ার জন্য clear প্রোপার্টি ব্যবহার করা হয়।clear প্রোপার্টিটি প্রয়োগ করা হয়।overflow: auto; এর ব্যবহারoverflow: auto; ব্যবহার করতে পারি।ওয়েব লেআউটের উদাহরণ
float প্রোপার্টি ব্যবহারের মাধ্যমে একটি সাধারণ ওয়েবপেজের লে-আউট তৈরি করে দেখানো হলোঃdisplay: inline-block;float প্রোপার্টি ব্যবহার করে গ্রিড(gird) বক্স তৈরি করা হতো, ব্রাউজার রিসাইজ করলে যা ব্রাউজারের সম্পূর্ণ প্রস্থ দখল করে এবং কন্টেন্টসমূহকে সুন্দরভাবে মুড়িয়ে(wrapping) ফেলে।display: inline-block; ব্যবহার করে এই কাজ আরো সহজে করা সম্ভব।float-ব্যবহারের পূর্বের পদ্ধতি
inline-block এর নতুন ব্যবহার পদ্ধতি
display:inline-block ব্যবহার করা হয়েছে ফলে পরের ফ্লোটিং এর জন্য clear প্রোপার্টি ব্যবহারের প্রয়োজন হয়নি।সিএসএসের মাধ্যমে একটি এলিমেন্টকে ডানে, বামে এবং মাঝে শ্রেনীবিন্যাস বা সাজানো যায়। যেমনটি এই এলিমেন্টটিকে মাঝে শ্রেনীবিন্যাস করা হয়েছে।
এলিমেন্টকে মধ্যখানে এলাইন
margin: auto; ব্যবহার করে আপনি কোন এলিমেন্টকে অনুভূমিকভাবে কেন্দ্রে আনতে পারবেন। কন্টেন্টের জন্য আপনাকে নির্দিষ্ট প্রস্থ(widht) সেট করে দিতে হবে। আর কন্টেন্টের প্রস্থ ব্যতীত অবশিষ্ট প্রস্থটি দুই মার্জিনের মধ্যে সমানভাবে বিভক্ত হবে। এতে করে আপনার কন্টেন্টটি সর্বদাই মধ্যখানে অবস্থান করবেঃwidth প্রোপার্টি সেট করা হয়নি অথবা width প্রোপার্টির ভ্যালু 100% সেট করা হয়েছে, সেই সকল এলিমেন্টে margin: auto; কোন প্রভাবে ফেলবে না। এই বিষয়টি গুরুত্ব সহকারে মনে রাখতে হবে।টেক্সট মাঝে এলাইন
text-align: center; প্রোপার্টি ব্যবহার করা হয়।ছবিকে মাঝে এলাইন
img এলিমেন্টের মধ্যে margin: auto; এবং display: block; একত্রে ব্যবহার করে আমরা একটি ইমেজকে মাঝখানে আনতে পারবোঃএলিমেন্টকে ডানে এবং বামে এলাইন
position: absolute; ব্যবহার করে আমরা একটি এলিমেন্টকে ডানে এবং বামে এলাইন করতে পারিঃposition প্রোপার্টি ব্যবহার করবেন, এক্ষেত্রে অবশ্যই এলিমেন্টে margin এবং padding উল্লেখ করতে হবে। কারণ এটি ডিফল্টভাবে বিভিন্ন ব্রাউজারে বিভিন্ন হয়।position প্রোপার্টি ব্যবহার করতে সমস্যা হয়। এখন যদি আমরা একটি container এলিমেন্ট ব্যবহার করি যার প্রস্থ নির্দিষ্ট করা আছে এবং যদি !DOCTYPE ঘোষণা করা না হয়ে থাকে তাহলে ইন্টারনেট এক্সপ্লোরার(৮) এবং এর পূর্বের ভার্সনে ডান দিকে 17px মার্জিন যোগ হবে। মনে করা হয় যে এই জায়গাটি স্ক্রলবারেরposition প্রোপার্টি ব্যবহার করতে সমস্যা হয় তাই সম্পুর্ন বডির মার্জিন এবং প্যাডিং শূন্য করে দিয়ে একটি container এলিমেন্ট width নির্দিষ্ট করে দেওয়া হয়েছে। ফলে ইন্টারনেট এক্সপ্লোরারে এ সমস্যা আর হবে না।বামে এবং ডানে এলাইন -
float প্রোপার্টির ব্যবহারfloat প্রোপার্টি ব্যবহার করেও এলিমেন্টকে ডানে এবং বামে এলাইন করতে পারি।float প্রোপার্টি ব্যবহার করবেন, এক্ষেত্রে অবশ্যই < body> এলিমেন্টে margin এবং padding উল্লেখ করতে হবে। কারণ এটি ডিফল্টভাবে বিভিন্ন ব্রাউজারে বিভিন্ন হয়।float প্রোপার্টি ব্যবহারে সমস্যা রয়েছে। যদি !DOCTYPE ঘোষণা করা না হয়ে থাকে তাহলে ইন্টারনেট এক্সপ্লোরার(৮) এবং এর পূর্বের ভার্সনে ডান দিকে 17px মার্জিন যোগ হবে। মনে করা হয় যে এই জায়গাটি স্ক্রলবারের জন্য নির্দিষ্ট করা থাকে। তাই সবসময় float ব্যবহার করার আগে !DOCTYPE ঘোষণা করতে হবে।সিএসএস কম্বিনেটর
বংশধর(descendant) সিলেক্টর
< div> এলিমেন্টের মধ্যে অবস্থিত সকল < p> এলিমেন্টকে সিলেক্ট করে দেখানো হলোঃচাইল্ড(child) সিলেক্টর
< div> এলিমেন্টের মধ্যের < p> এলিমেন্টগুলো থেকে যেগুলো < div> এর সরাসরি চাইল্ড সেগুলোকে সিলেক্ট করবেঃসহোদর(adjacent sibling) সিলেক্টর
< div> এলিমেন্টের পরবর্তী সিবলিং < p> এলিমেন্টটিকে সিলেক্ট করবেঃসাধারণ সহোদর(general sibling) সিলেক্টর
< div> এলিমেন্টের পরবর্তী সকল সিবলিং < p> এলিমেন্ট গুলো সিলেক্ট করবেঃkt_satt_skill_example_id=857
সুডো-ক্লাস কি?
:hover এর মাধ্যমে সিলেক্ট করতে হবে।সকল সিএসএস সুডো-ক্লাস
সিলেক্টর উদাহরণ বর্ণনা :activea:activeএকটিভ লিংককে সিলেক্ট করবে। :checkedinput:checkedযেসকল এলিমেন্ট "checked" সেট করা হয়েছে সেগুলোকে সিলেক্ট করবে।:disabledinput:disabledযেসকল এলিমেন্ট "disabled" সেট করা হয়েছে সেগুলোকে সিলেক্ট করবে।:emptydiv:emptyযেসকল :enabledinput:enabledপ্রত্যেকটি সক্রিয় এলিমেন্টকে সিলেক্ট করবে।:first-childli:first-childপ্যারেন্ট এলিমেন্টের প্রথম চাইল্ড এলিমেন্টকে সিলেক্ট করবে।:first-of-typeli:first-of-typeপ্যারেন্ট এলিমেন্টের অন্তর্গত সবগুলো এলিমেন্টের মধ্যে প্রথম এলিমেন্টকে সিলেক্ট করবে।:focusinput:focusফোকাসকৃত এলিমেন্টকে সিলেক্ট করবে।:hoverdiv:hover:in-rangeinput:in-rangeএকটি নির্দিষ্ট রেঞ্জের ভ্যালুসহ এলিমেন্টকে সিলেক্ট করবে।:invalidinput:invalidইনভ্যালিড ভ্যালুযুক্ত এলিমেন্টকে সিলেক্ট করবে।:langp:lang(lan)lang এট্রিবিউটের "lan" এর ভ্যালুযুক্ত সকল এলিমেন্টকে সিলেক্ট করে:last-childli:last-childপ্যারেন্ট এলিমেন্টের সর্বশেষ চাইল্ড এলিমেন্টকে সিলেক্ট করবে।:last-of-typeli:last-of-typeপ্যারেন্ট এলিমেন্টের অন্তর্গত সবগুলো এলিমেন্টের মধ্যে সর্বশেষ এলিমেন্টকে সিলেক্ট করবে।:linka:linkএকটি সাধারণ আন-ভিজিটেড লিংককে সিলেক্ট করবে। :not(selector):not(div):nth-child(n)p:nth-child(2)প্যারেন্ট এলিমেন্টের দ্বিতীয় চাইল্ড এলিমেন্টকে সিলেক্ট করবে।:nth-last-child(n)p:nth-last-child(2)একই প্যারেন্ট এলিমেন্টের শেষের দিক থেকে দ্বিতীয় চাইল্ড এলিমেন্টকে সিলেক্ট করবে।:nth-last-of-type(n)p:nth-last-of-type(2)একই প্যারেন্ট এলিমেন্টের সবগুলো এলিমেন্টের মধ্যে শেষের দিক থেকে দ্বিতীয় এলিমেন্টকে সিলেক্ট করবে।:nth-of-type(n)p:nth-of-type(2)প্যারেন্ট এলিমেন্টের সবগুলো এলিমেন্টের মধ্যে দ্বিতীয় এলিমেন্টকে সিলেক্ট করবে।:only-of-typep:only-of-typeযদি এলিমেন্টটি তার প্যারেন্টের একমাত্র এলিমেন্ট হয় তবে তাকে সিলেক্ট করবে।:only-childp:only-childযদি এলিমেন্টটি তার প্যারেন্টের একমাত্র চাইল্ড এলিমেন্ট হয় তবে তাকে সিলেক্ট করবে।:optionalinput:optionalrequired এট্রিবিউট ব্যাতীত বাকি এলিমেন্টগুলোকে সিলেক্ট করবে।:out-of-rangeinput:out-of-rangeনির্দিষ্ট রেঞ্জের বাহিরের ভ্যালুযুক্ত এলিমেন্টকে সিলেক্ট করবে।:read-onlyinput:read-only"readonly" এট্রিবিউটযুক্ত এলিমেন্টকে সিলেক্ট করবে।:read-writeinput:read-write"readonly" এট্রিবিউট ব্যাতীত বাকি সবগুলো এলিমেন্টকে সিলেক্ট করবে।:requiredinput:required"required" এট্রিবিউটযুক্ত সবগুলো এলিমেন্টকে সিলেক্ট করবে।:rootrootডকুমেন্টের মূল(সাধারনত ) এলিমেন্টকে সিলেক্ট করবে। :target#news:targetসক্রিয় #news আইডি যুক্ত এলিমেন্টকে সিলেক্ট করবে।:validinput:validসকল ভ্যালিড ভ্যালুযুক্ত এলিমেন্টকে সিলেক্ট করবে।:visiteda:visitedভিজিটেড লিংককে সিলেক্ট করবে।
গঠন প্রণালী
selector:pseudo-class {
property: value;
}অ্যাঙ্কর(Anchor) সুডো-ক্লাস
a:hover অবশ্যই a:link এবং a:visited এর পরে লিখতে হবে। তা না হলে a:hover কাজ করবে না। এছাড়া a:active কে অবশ্যই a:hover এর নিচে লিখতে হবে। তা না হলে a:hover কাজ করবে না।সুডো-ক্লাস এবং সিএসএস-ক্লাস
< div> এর মধ্যে হোভার:hover সুডো-ক্লাস ব্যবহার করে কিভাবে একটি টুলটিপ হোভার
< div> এলিমেন্টটিতে হোভার করলে অনেকটা টুলটিপ আকারে একটি < p> এলিমেন্ট দেখা যাবে।:first-child সুডো-ক্লাস:first-child সুডো ক্লাস ব্যবহার করবো। এলিমেন্ট হয় তবে তাকে সিলেক্ট করবে।< div> এলিমেন্টের মধ্যের < p> এলিমেন্ট সিলেক্ট< div> এলিমেন্টের মধ্যে অবস্থিত প্রথম < p> এলিমেন্টটি সিলেক্ট করবে।প্রথম চাইল্ড এলিমেন্ট
< li> এর মধ্যে < span> এলিমেন্ট গুলো সিলেক্ট< li> কে খুজে বের করে তার মধ্যকার < span> এলিমেন্ট গুলো সিলেক্ট করবে।সুডো-এলিমেন্ট কি?
সকল সিএসএস সুডো-এলিমেন্ট
সিলেক্টর উদাহরণ বর্ণনা ::afterp::after< p> এলিমেন্টের পরে কন্টেন্ট যোগ করবে।::beforep::before< p> এলিমেন্টের পূর্বে কন্টেন্ট যোগ করবে।::first-letterp::first-letter< p> এলিমেন্টের প্রথম শব্দটি সিলেক্ট করবে।::first-linep::first-line< p> এলিমেন্টের প্রথম লাইনটিকে সিলেক্ট করবে।::selectionp::selectionব্যবহারকারী কর্তৃক সিলেক্টকৃত < p> এলিমেন্টের অংশকে সিলেক্ট করবে।গঠণপ্রণালী
selector::pseudo-element {
property: value;
}::first-line সুডো-এলিমেন্ট::first-line সুডো-এলিমেন্টটি একটি টেক্সটের প্রথম লাইনকে সিলেক্ট করার জন্য ব্যবহার করা হয়।
বিঃদ্রঃ ::first-line সুডো-এলিমেন্টটি শুধুমাত্র ব্লক-লেভেল এলিমেন্টের জন্যে ব্যবহার করা যায়।::first-line সুডো-এলিমেন্টে নিম্নলিখিত প্রোপার্টিগুলো ব্যবহার করা যায়ঃfontcolorbackgroundword-spacingletter-spacingtextVertical-aligntext-transforline-heightclear::first-letter সুডো-এলিমেন্ট::first-letter সুডো-এলিমেন্টটি ব্যবহার করা হয়।
বিঃদ্রঃ::first-letter সুডো-এলিমেন্টটি শুধুমাত্র ব্লক-লেভেল এলিমেন্টের জন্য ব্যবহার করা যায়।::first-letter সুডো-এলিমেন্টে নিম্নলিখিত প্রোপার্টিগুলো ব্যবহার করা যায়ঃfontcolorbackgroundmarginpaddingbordertext-decorationvertical-align("float" যদি "none" হয়)text-transformline-heightfloatclearসুডো-এলিমেন্ট এবং সিএসএস ক্লাস
একাধিক সুডো-এলিমেন্টের ব্যবহার
::before সুডো-এলিমেন্ট::before সুডো-এলিমেন্ট ব্যবহার করা হয়।::after সুডো-এলিমেন্ট::after সুডো-এলিমেন্ট ব্যবহার করা হয়।::selection সুডো-এলিমেন্ট::selection সুডো-এলিমেন্টটি ব্যবহার করা হয়।::selection সুডো-এলিমেন্টের সাথে নিচের সিএসএস প্রোপার্টিগুলো ব্যবহার করা যায়ঃopacity প্রোপার্টি ব্যবহার করবো।ট্রান্সপারেন্ট ইমেজ
opacity প্রোপার্টি ব্যবহার করতে পারি। এই ক্ষেত্রে আমরা 0.0 থেকে 1.0 পর্যন্ত ভ্যালু নিতে পারবো। এখানে ভ্যালু যত কম হবে তত বেশি অসচ্ছ বা ট্রান্সপারেন্ট হয়ঃ
ডিফল্টট্রান্সপারেন্ট হোভার ইফেক্ট
opacity এবং :hover এই দুইটি প্রোপার্টিকে একত্রে ব্যবহার করে আমরা ইমেজে হোভারের মধ্যে opacity ইফেক্ট দিবঃ
RGBA মাধ্যমে ট্রান্সপারেন্ট
ট্রান্সপারেন্ট টেক্সট বক্স
< ul> এবং < li> ট্যাগ ব্যবহার করবোঃlist-style-type: none; - লিস্টের বুলেট চিহ্নকে মুছে দেয়। নেভিগেশনবারে বুলেট চিহ্ন দেখতে খারাপ দেখায়margin: 0; and padding: 0; সেট করুনভার্টিকাল নেভিগেশন বার
< a> এলিমেন্টকে স্টাইল করতে পারেন, এই জন্য উপরের কোডের সাথে নিচের অংশ ব্যবহার করতে হয়ঃdisplay: block; - লিঙ্কগুলোকে ব্লক এলিমেন্ট এবং পুরো লিঙ্ক এরিয়াকে ক্লিকযোগ্য করে, এবং ইহা আমাদেরকে অতিরিক্ত স্টাইল করতে সাহায্য করেwidth: 80px; - ব্লক এলিমেন্ট পুরো প্রস্থ ডিফল্ট আকারে নিয়ে নেয়। আমরা ৬০ পিক্সেল প্রস্থ নির্ধারণ করে দিয়েছিভার্টিকাল নেভিগেশন বারের উদাহরণ
এক্টিভ/কারেন্ট নেভিগেশন লিংক
সেন্টার এলাইন লিংক এবং বর্ডার যোগ
< li> অথবা < a> এলিমেন্টে text-align:center ব্যবহার করুন।< ul> এর মধ্যে border প্রোপার্টি দিন। নেভিগেশনবারের মাঝে বর্ডার দিতে এলিমেন্টে border-bottom ব্যবহার করতে হবেঃসম্পূর্ণ দৈর্ঘ্যের ফিক্সড ভার্টিকাল নেভিগেশনবার
হরিজন্টাল নেভিগেশন বার
ইনলাইন লিস্ট আইটেম
< li> এলিমেন্টকে ইনলাইন ডিফাইন করেঃdisplay: inline; - ডিফল্টভাবে লিস্ট আইটেমগুলো ব্লক এলিমেন্ট হিসেবে থাকে। আমরা এখানে লিস্টকে একই লাইনে দেখানোর জন্য আইটেমের উভয় পাশের লাইনব্রেক সরিয়ে দিলামফ্লোটিং লিস্ট আইটেম
float ব্যবহার করেও হরিজন্টাল নেভিগেশনবার তৈরি করা যায়ঃfloat: left; ব্যবহার করে ব্লক এলিমেন্টকে একটির পাশে আরেকটিকে রাখা হয়েছেdisplay: block; লিঙ্কগুলোকে ব্লক এলিমেন্ট হিসেবে এবং সম্পূর্ণ এড়িয়াকে ক্লিকযোগ্য করে তোলেpadding: 5px; সৌন্দর্যের জন্য ব্লক এলিমেন্টগুলোর চারপাশে প্যাডিং ডিফাইন করা হয়েছেbackground-color: aqua; রঙয়ের ব্যাকগ্রাউন্ড কালার দেয়া হলহরিজন্টাল নেভিগেশন বারের উদাহরণ
এক্টিভ/কারেন্ট নেভিগেশন লিংক
রাইট-এলাইন লিংক
float:right; ব্যবহার করে রাইট-এলাইন লিংক তৈরি করা হলঃলিংক ডিভাইডার
< li> এর মধ্যে border-right প্রোপার্টি যুক্ত করে লিঙ্ক ডিভাইডার তৈরি করা হয়ঃফিক্সড নেভিগেশন বার
বর্ডারসহ হরিজন্টাল নেভিগেশনবার
ড্রপডাউনের উদাহরণ
বেসিক ড্রপডাউন
উদাহরণের বর্ণনা
হোভার করে ড্রপডাউন কন্টেন্ট প্রদর্শনের জন্য একটি এলিমেন্ট ব্যবহার করতে হয়। যেমনঃ অথবা এলিমেন্ট।.dropdown ক্লাসে position:relative ব্যবহার করা হয়েছে। এর কারণ আমরা position:absolute ব্যবহার করে কন্টেন্টগুলোকে বাটনের নিচে দেখাতে চাই।.dropdown-content ক্লাসটির মধ্যে ড্রপডাউন কন্টেন্টগুলো রয়েছে এবং ইহা ডিফল্ট আকারে অদৃশ্য থাকে এবং মাউস নিয়ে গেলে শুধু দেখা যাবে। min-width 160px সেট করা হয়েছে।box-shadow প্রোপার্টি ব্যবহার করেছি।:hover সিলেক্টরটি ব্যবহার করা হয়েছে ড্রাপডাউন বাটনের উপর মাউস নিয়ে গেলে ড্রপডাউন আইটেমকে প্রদর্শনের জন্য।ড্রপডাউন মেনু
রাইট-এলাইন ড্রপডাউন কন্টেন্ট
right: 0; সেট করে দিনঃটুলটিপের উদাহরণ
বেসিক টুলটিপ
উদাহরণের বর্ণনা
একটি কন্টেইনার এলিমেন্ট হিসেবে < div> এলিমেন্টকে ব্যবহার করা হয়েছে এবং এতে "tooltip" ক্লাসটি যোগ করা হয়েছে।span এলিমেন্টে class="tooltiptext" ব্যবহার করা হয়েছে এবং টুলটিপ টেক্সট রাখা হয়েছে।tooltipক্লাসটিতে position:relative ব্যবহার করা হয়েছে। কারণ আমরা টুলটিপ টেক্সটের অবস্থান নির্ধারণের ক্ষেত্রে position:absolute ব্যবহার করবো।tooltiptext ক্লাসটির মাধ্যমে টুলটিপ টেক্সটকে হাইড করা হয়েছে এবং টুলটিপ টেক্সটের আরো কিছু স্টাইল করা হয়েছে।class="tooltip" যুক্ত :hover সিলেক্টরটি যোগ করা হয়েছে। এর ফলে আমরা .tooltiptext ক্লাসের visibility প্রোপার্টির ভ্যালু visible সেট হয়ে যাবে।টুলটিপের অবস্থান নির্ধারণ
ডানদিকে টুলটিপ
left:105% ব্যবহার করেছি এবং টুলটিপ টেক্সটকে হোভারএবল টেক্সটের মাঝামাঝি দেখানোর জন্য top:-5px ব্যবহার করেছি।top প্রোপার্টির ভ্যালুতেও একই মান ব্যবহার করতে হবে। একই মান ব্যবহার না করলে টুলটিপ টেক্সট মাঝামাঝি থাকবে না।উপরেরদিকে টুলটিপ
bottom: 100% ব্যবহার করতে হবে এবং আমরা margin-left: -60px ব্যবহার করেছি টুলটিপ টেক্সটকে মাঝামাঝি দেখানোর জন্য। -৬০ পিক্সেল ব্যবহার করার কারণ টুলটিপ টেক্সটের প্রস্থ ১২০ পিক্সেল, আমরা এর প্রস্থের অর্ধেক নিয়েছি।নিচেরদিকে টু্লটিপ
bottom: 100% এর পরিবর্তে top: 100% ব্যবহার করতে হবেঃটুলটিপে অ্যাঁরোর ব্যবহার
নিচেরদিকে অ্যাঁরো
top: 100% ব্যবহার করেছি এবং left: 50% ব্যবহার করে অ্যাঁরোকে মাঝামাঝি নিয়ে এসেছি। border-width: 5px দ্বারা অ্যাঁরোর সাইজ নির্ধারণ করা হয়েছে, অ্যাঁরোর সাইজ নির্ধারণ করার পর একে মাঝামাঝি রাখার জন্য margin-left: -5px ব্যবহার করেছি।border-color: black transparent transparent transparent; সেট করতে হবে।উপরেরদিকে অ্যাঁরো
top: 100% এর পরিবর্তে bottom: 100% ব্যবহার করতে হবে এবং border-color: transparent transparent black transparent; সেট করতে হবে।বামদিকে অ্যাঁরো
top: 50%, right: 100% এবং border-color: transparent black transparent transparent ব্যবহার করতে হবে।ডানদিকে অ্যাঁরো
top: 50%, left: 100% এবং border-color: transparent transparent transparent black ব্যবহার করতে হবে।টুলটিপ এনিমেশন
transition প্রোপার্টি ও opacity প্রোপার্টির ব্যবহারঃ
এখানে ইমেজের বর্ণনা লিখুন
ইমেজ গ্যালারি
ইমেজ স্প্রাইট(Sprite)
ইমেজ স্প্রাইট(Sprite) - সাধারণ উদাহরণ
width: 46px; height: 44px; - ইমেজের যে অংশটি আমরা ব্যবহার করতে চাই সেই অংশটিকে নির্দিষ্ট করে।background: url(icon.gif) 0 0; - ব্যাকগ্রাউন্ড ইমেজ এবং এর অবস্থান নির্ধারণ করে ( এখানে left এর ভ্যালু 0px এবং top এর ভ্যালু 0px )।ইমেজ স্প্রাইট(Sprite) এর মাধ্যমে নেভিগেশন লিস্ট তৈরি
ইমেজ স্প্রাইট(Sprite) - হোভার ইফেক্ট
:hover সিলেক্টরটি শুধুমাত্র লিংকে নয়, বরং সকল এলিমেন্টেই ব্যবহার করা যায়।
নির্দিষ্ট এট্রিবিউটের সাহায্যে এইচটিএমএল এলিমেন্টকে স্টাইল করা
সিএসএস [attribute] সিলেক্টর
[attribute] সিলেক্টরের সাহায্যে নির্দিষ্ট এট্রিবিউট যুক্ত এলিমেন্টকে সিলেক্ট করা যায়।সিএসএস [attribute="value"] সিলেক্টর
[attribute="value"] সিলেক্টরের মাধ্যমে নির্দিষ্ট এট্রিবিউট এবং এট্রিবিউটের ভ্যালু যুক্ত এলিমেন্টকে সিলেক্ট করা যায়।সিএসএস [attribute~="value"] সিলেক্টর
[attribute~="value"] সিলেক্টরের মাধ্যমে এট্রিবিউটের ভ্যালুর কোন একটি নির্দিষ্ট শব্দের সাহায্যে এলিমেন্টকে সিলেক্ট করা যায়।সিএসএস [attribute|="value"] সিলেক্টর
[attribute|="value"] সিলেক্টরের মাধ্যমে কোন নির্দিষ্ট এট্রিবিউটের একটি নির্দিষ্ট ভ্যালু দিয়ে শুরু হওয়া এলিমেন্টকে সিলেক্ট করা যায়।সিএসএস [attribute^="value"] সিলেক্টর
[attribute^="value"] সিলেক্টরটি এলিমেন্টকে সিলেক্ট করতে ব্যবহৃত হয় যাদের এট্রিবিউটের ভ্যালু কোন একটি নির্দিষ্ট ভ্যালু দিয়ে শুরু হয়।সিএসএস [attribute$="value"] সিলেক্টর
[attribute$="value"] সিলেক্টরটি এমন এলিমেন্টকে সিলেক্ট করতে ব্যবহৃত হয় যাদের এট্রিবিউটের ভ্যালু কোন একটি নির্দিষ্ট ভ্যালু দিয়ে শেষ হয়।সিএসএস [attribute*="value"] সিলেক্টর
[attribute*="value"] সিলেক্টরটি এমন এলিমেন্টকে সিলেক্ট করতে ব্যবহৃত হয় যাদের এট্রিবিউট একটি নির্দিষ্ট ভ্যালু বহন করে।এট্রিবিউট সিলেক্টরের মাধ্যমে ফর্ম স্টাইল করা
kt_satt_skill_example_id=1003
ইনপুট ফিল্ডের প্রস্থ নির্ধারণ করা
width প্রোপার্টি ব্যবহার করা হয়।width ইলিমেন্ট এর জন্য প্রযোজ্য। আপনি যদি শুধুমাত্র একটি নির্দিষ্ট ইনপুট এলিমেন্টকে স্টাইল করতে চান, তাহলে আপনি এট্রিবিউট সিলেক্টর ব্যবহার করতে পারেনঃinput[type=text] - শুধুমাত্র টেক্সট ফিল্ডকে সিলেক্ট করে।input[type=submit] - শুধুমাত্র সাবমিট ফিল্ডকে সিলেক্ট করে।input[type=number] - শুধুমাত্র নাম্বার ফিল্ডেকে সিলেক্ট করে।ইনপুট ফিল্ডে প্যাডিং যুক্ত করা
padding প্রোপার্টি ব্যবহার করতে হয়।।margin যুক্ত করতে চান তাহলে মার্জিন প্রোপার্টি ব্যবহার করুনঃbox-sizing প্রোপার্টির ভ্যালু border-box সেট করা হয়েছে। এর মাধ্যমে আমরা নিশ্চিত হয় যে, এলিমেন্টের প্যাডিং এবং মার্জিন এর মোট দৈর্ঘ্য এবং প্রস্থের মধ্যে অন্তর্ভুক্ত হয়েছে।box-sizing প্রোপার্টি সম্পর্কে আর বিস্তারিত জানতে আমাদের সিএসএস(৩) box-sizing অধ্যায় ভিজিট করুন।ইনপুট ফিল্ডে বর্ডার যুক্ত করা
border প্রোপার্টি ব্যবহার করা হয়। এছাড়া বর্ডারের আকার গোলাকৃতি কর্ণারের মত করার জন্য border-radius প্রোপার্টি ব্যবহার করুনঃborder-bottom প্রোপার্টিটি ব্যবহার করুনঃইনপুট ফিল্ডে কালার যুক্ত করা
background-color প্রোপার্টি এবং টেক্সটের কালার পরিবর্তনের জন্য color প্রোপার্টি ব্যবহার করা হয়ঃইনপুট ফিল্ডকে ফোকাস করা
outline: none; ব্যবহার করে এই ইফেক্ট দুর করতে পারেন।:focus সিলেক্টরটি ব্যবহার করা হয়ঃইনপুট ফিল্ডে আইকন/ইমেজ যুক্ত করা
background-image প্রোপার্টি এবং অবস্থান নির্ধারণ করার জন্য background-position প্রোপার্টি ব্যবহার করা হয়।padding-left প্রোপার্টি ব্যবহার করেছি।সার্চ ইনপুটে এনিমেশন যুক্ত করা
transition প্রোপার্টি ব্যবহার করেছি। ট্রানজিশন সম্মন্ধে জানতে আমাদের সিএসএস(৩) ট্রানজিশন অধ্যায় ভিজিট করুন।টেক্সট এরিয়াকে স্টাইল করা
resize প্রোপার্টি ব্যবহার করা হয়। resize প্রোপার্টির মাধ্যমে টেক্সট এরিয়াকে রিসাইজ করা থেকে বিরত রাখা যায়।সিলেক্ট মেনুকে স্টাইল স্টাইল করা
ইনপুট বাটন স্টাইল করা
সিএসএস কাউন্টার
এক নজরে সিএসএস কাউন্টার প্রোপার্টিসমূহ
counter-reset - একটি কাউন্টার তৈরি বা রিসেট করে।counter-increment - কাউন্টারের ভ্যালু বৃদ্ধি করে।content - সৃষ্টিকৃত কন্টেন্ট ইনসার্ট করে।counter() অথবা counters() ফাংশন - একটি এলিমেন্টে কাউন্টারের ভ্যালু যুক্ত করে।counter-reset প্রোপার্টি দিয়ে ইহা তৈরি করে নিতে হবে।body সিলেক্টরের মাধ্যমে একটি পেজকে সিলেক্ট করে এর মধ্যে counter-reset প্রোপার্টি ব্যবহার করে section নামের একটি কাউন্টার ভ্যারিয়েবল তৈরি করা হয়েছে।counter-increment প্রোপার্টি ব্যবহার করে প্রত্যেক < h1> এলিমেন্টের জন্য section এর ভ্যালু বৃদ্ধি করা হয়েছ।content প্রপার্টির মাধ্যমে কাউন্টার(section) ভ্যারিয়েবলসহ এর বর্ধিত ভ্যালুকে প্র্যতেক < h1> এলিমেন্টের পূর্বে স্থান দেওয়া হয়েছে।নেস্টেড কাউন্টার
body সিলেক্টরের মাধ্যমে পেজের জন্য section কাউন্টার ভ্যারিয়েবল তৈরি করে সিলেক্টরের মাধ্যমে section এর মধ্যে subsection কাউন্টার ভ্যারিয়েবল তৈরি করা হয়েছে।counters() এর পরিবর্তে counters() ফাংশন ব্যবহার করা হয়।
Promotion
Download Our Mobile Apps
